7

この jquery コードと html は、英語の語学トレーニング サイトで問題なく動作します。

$(document).ready(function() {
  $("p").hover(
    function() {
      $(this).css({"color": "purple", "font-weight" : "bolder"});
    },
    function() {
      $(this).css({"color": "black", "font-weight" : ""});
    }
  ); 
  $("p").click(function (event) {
    var element = $(this);
    var elementID = event.target.id;
    var oggVar = (elementID +".ogg");   
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', oggVar); 
    audioElement.load();
    audioElement.addEventListener("load", function() { 
        audioElement.play(); 
    }, true);
    audioElement.play();    
  }); 
});

<div>
  <p id="one"> this is the first paragraph</p>
....   
  <p id="four"> this is the fourth paragraph</p> 
....   
</div>

問題は、オーディオ ファイルの再生中にテキストをクリック (またはダブルクリック) すると、2 番目のファイル (または同じファイル) の再生が開始されることです。そのため、2 つのファイルを同時に再生することになります。これを防ぐ必要があります。「終了」イベントは関連していると思いますが、いくつかの例を見ても、ファイルが再生されているかどうかを検出し、終了するまで待ってから 2 番目のファイルを開始する (または再生を防止する) 方法がよくわかりません。まったく）。どんな助けでも大歓迎です:)

4

3 に答える 3

13

終了したイベントと再生中のイベントのイベント リスナーを追加できます。また、javascript を介してオーディオ タグを作成するのはなぜですか? 空の隠しオーディオ タグを作成するだけです。

<audio id='myAudio' autoplay='autoplay'></audio>

次の 2 つのオプションがあります。

  • オーディオの再生中/停止中にボタン/リンクを無効/有効にします（私見が望ましい）
  • 再生中のクリックを無視する

次に、2 つのイベントリスナーを追加します。

var playing = false;

$('#myAudio').on('playing', function() {
   playing = true;
   // disable button/link
});
$('#myAudio').on('ended', function() {
   playing = false;
   // enable button/link
});

$("p").click(function (event) {
   if(!playing) {
      var element = $(this);
      var elementID = event.target.id;
      var oggVar = (elementID +".ogg");   
      var audioElement = $('#myAudio')[0];
      audioElement.setAttribute('src', oggVar); 
      audioElement.play();
   }

});
于 2013-03-23T13:13:30.847 に答える
0 
 ***var audioElement = null;***     

 $("p").click(function (event) {

    ***if (audioElement) {
        audioElement.pause();
     }***

var element = $(this);
var elementID = event.target.id;
var oggVar = (elementID +".ogg");   
audioElement = document.createElement('audio');
audioElement.setAttribute('src', oggVar); 
audioElement.load();
audioElement.addEventListener("load", function() { 
    audioElement.play(); 
}, true);
audioElement.play();    

 });
于 2013-03-23T12:41:54.250 に答える