javascript - 现场 HTML 5 音频控件无法正常工作

Question

我希望有人能够帮助解决我遇到的问题。下面的代码管理我正在开发的网站上的音频播放器。这个想法是，用户可以单击静音按钮来切换网站上的声音，如果用户单击特定链接离开网站，则声音应该被静音(如果尚未静音)。

因此，下面脚本的第一部分为音频播放器(音频 html5 标签)(audioPlayer) 设置一个全局变量，第二部分为用户可以单击的静音按钮设置一个全局变量。

<script type="text/javascript">
var muteAudio = document.getElementById('audioPlayer'),
    ctrl = document.getElementById('audioControl');

然后，如果有人单击静音按钮，我会将静音按钮的内部 html 更新为静音或播放，具体取决于按钮所处的状态

ctrl.onclick = function () {

    // Update the Button
    var pause = ctrl.innerHTML === 'Mute';
    ctrl.innerHTML = pause ? 'Play' : 'Mute';

然后我更新了 html 5 音频嵌入方法

    // Update the Audio
    var method = pause ? 'pause' : 'play';
    muteAudio[method]();

    // Prevent Default Action
    return false;
};

脚本的第二部分为将用户带到电子商务商店的外部链接 (SHOP) 设置第三个全局变量。如果声音打开，则当用户离开时，声音应该静音。如果声音没有打开，则不应执行此 if 语句

ctrl3 = document.getElementById('muter');

if (ctrl.innerHTML.indexOf('Mute') != -1) {
console.log('not-muted');  
ctrl3.onclick = function () {

  $("#audioControl").click(); 
  return false;
};
}
else {console.log('did nothing');}

</script>

问题是 if 语句似乎不起作用。如果音频被静音，则当用户退出在线商店时，不应执行静音按钮上的单击功能来静音。发生的情况是 if 语句似乎总是正确的，因为无论静音按钮是否处于播放状态(即静音按钮显示静音/内部 html)，如果音乐正在播放并切换，它都会将声音切换为关闭如果音乐关闭则声音打开(似乎忽略了内部 html 文本的 if 语句检查。

您可以在这里看到它 http://goo.gl/DJMJBx

感谢您的帮助!

Answer 1

问题在于 ctrl3 的点击处理程序是有条件附加的。

您想要的是无条件附加处理程序，并在处理程序内执行测试 - 即每当单击链接时。

这是为了使用 jQuery 而重新设计的整个过程。

$(function() {
    var $audio = $('#audioPlayer'),
        $audioControl = $('#audioControl');

    $audioControl.on('click', function (e) {
        e.preventDefault();
        var pause = $audioControl.html() === 'Mute';
        $audioControl.html(pause ? 'Play' : 'Mute');
        $audio.get(0)[pause ? 'pause' : 'play']();
    });

    $('#muter').on('click', function (e) {
        if ($audioControl.html() === 'Mute') {
            $audioControl.click(); 
        };
    });
});