Question

我目前有按钮设置来播放活动中的声音。主音频按钮播放一个句子。我所追求的是在主句播放时让其他锚点不可点击的方法。这是我的HTML首先：

<audio id="sentence" src="../audio/m_sentence2.mp3"></audio>
<audio id="sound1" src="../../../globalResources/audio/male/hand.mp3"></audio>
<audio id="sound2" src="../../../globalResources/audio/male/foot.mp3"></audio>
<audio id="sound3" src="../../../globalResources/audio/male/nose.mp3"></audio>

<a href="#" class="audioBtn" id="audioMain"></a>
<a href="#" class="audioBtn" id="audio1"></a>
<a href="#" class="audioBtn" id="audio2"></a>
<a href="#" class="audioBtn" id="audio3"></a>

现在我已经编写了这个jQuery来播放声音：

var sentence = $('#sentence');
var sound1 = $('#sound1');
var sound2 = $('#sound2');
var sound3 = $('#sound3');

    $("#audioMain").click(function() {
        sentence.get(0).play();
        });


    $("#audio1").click(function() {
        sound1.get(0).play();       
        });


    $("#audio2").click(function() {
        sound2.get(0).play();       
        });


    $("#audio3").click(function() {
        sound3.get(0).play();       
        });

有没有办法让句子播放时，其他声音无法播放？我尝试过像removeAttr这样的东西但似乎无法禁用声音。我可以完全隐藏按钮，但在这种情况下这不是一个选项。

Answer 1

可能想要创建一个函数，但这应该可行。

var sentence = $('#sentence'),
sound1 = $('#sound1'),
sound2 = $('#sound2'),
sound3 = $('#sound3'),
sentancePlaying = false;


$("#audioMain").click(function() {
    sentence.get(0).play();
    sentancePlaying = true;
});


$("#audio1").click(function() {
    if(!sentancePlaying){ 
        sound1.get(0).play(); 
    }
});


$("#audio2").click(function() {
    if(!sentancePlaying){ 
        sound2.get(0).play();
    }
});


$("#audio3").click(function() {
    if(!sentancePlaying){ 
        sound3.get(0).play();
    }
});

Answer 2

好的，所以我想出了一个解决方案。在句子点击功能上，我将其他音频按钮的指针事件更改为无。然后将一个绑定'结束'事件函数写入正在播放的句子中，这样当完成播放时，其他按钮再次变为可点击。代码如下：

$('#sentence').bind('ended', function() {
        $('#audio1').css('pointer-events', 'auto');
        $('#audio2').css('pointer-events', 'auto');
        $('#audio3').css('pointer-events', 'auto');

        }); 


    $("#audioMain").click(function() {
        sentence.get(0).play();
        $('#audio1').css('pointer-events', 'none');
        $('#audio2').css('pointer-events', 'none');
        $('#audio3').css('pointer-events', 'none');
        });

在HTML5 / jQuery中播放声音时禁用所有声音

2 个答案: