我希望有人能够帮助解决我遇到的问题。下面的代码管理我正在开发的网站上的音频播放器。这个想法是,用户可以单击静音按钮来切换网站上的声音,如果用户单击特定链接离开网站,则声音应该被静音(如果尚未静音)。
因此,下面脚本的第一部分为音频播放器(音频 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
感谢您的帮助!
最佳答案
问题在于 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();
};
});
});
关于javascript - 现场 HTML 5 音频控件无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27684354/