HTML 5音频控件在现场无法正常工作
HTML 5音频控件在现场无法正常工作
提问于 2014-12-29 06:27:33
我希望有人能帮助我解决一个问题。下面的代码管理一个我正在开发的网站上的音频播放器。这个想法是，用户可以点击一个静音按钮来切换网站上的声音，如果用户单击一个特定的链接离开网站，声音应该是静音的，如果还没有。
因此，下面脚本的第一部分为音频播放器(音频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)，如果音乐正在播放，它将关闭声音，如果音乐关闭，则切换声音到on (似乎忽略了内部html文本的if语句检查)。
你可以看到它住在这里，http://goo.gl/DJMJBx
谢谢你的帮忙!
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-12-29 08:02:36
问题是ctrl3 3的单击处理程序是有条件地附加的。
您想要的是无条件地附加处理程序，并在处理程序内执行测试--即每当单击链接时。
以下是在整个过程中重新使用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();
};
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27684354
复制相关文章
相似问题
腾讯云开发者
