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

わかりましたので、解決策を思いつきました。センテンス クリック機能では、他のオーディオ ボタンのポインター イベントをなしに変更します。次に、再生中のセンテンスに bind 'ended' イベント関数を記述して、再生が終了すると他のボタンが再びクリック可能になるようにします。以下のコード:

$('#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 に答える