0

我目前有按钮设置在活动中播放声音。主音频按钮播放一个句子。我所追求的是一种在播放主句时让其他锚点不可点击的方法。这是我的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 之类的方法，但似乎无法禁用声音。我可以完全隐藏按钮，但在这种情况下这不是一个选项。

4

2 回答 2

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();
    }
});
于 2013-04-14T02:59:22.523 回答
0

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

$('#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');
        });
于 2013-04-17T09:50:07.820 回答