複数のソースHTML5オーディオをクリックして動的に読み込み/再生/一時停止するにはどうすればよいですか？

Question

コンテンツスライダーがあり、クリックごとに再生/停止するように設定されています。

問題：2回目のクリックで一時停止します。今すぐ一時停止しません。何か案は？

ここにサイトを参照してください：http://dev.alsoknownas.ca/music/（ホームページのオーディオブランドセクション）。

ここではコードです：

**の下ロイドによって提案されたコードを反映するように編集：

<audio id="player"></audio> 

がここにスクリプトです：このマークアップのための

$(document).ready(function(){ 
$("span.1").attr("data-src","song.mp3"); 
$("span.2").attr("data-src","song2.mp3"); 
$("span.3").attr("data-src","song3.mp3"); 
$("span.4").attr("data-src","song4.mp3"); 
$("span.5").attr("data-src","song5.mp3"); 
}); 

$("span.1,span.2,span.3,span.4,span.5").click(function() { 
    var player = document.getElementById("player"); 
    player.src = this.getAttribute("data-src"); 
    player.play(); 
}); 

Answer 1

：

<audio id="player"></audio> 

<span class="1">one</span> 
<span class="2">two</span> 

このスクリプトを使用します。

$("span.1") 
    .attr("data-src-mp3","song1.mp3") 
    .attr("data-src-ogg","song1.ogg"); 
$("span.2") 
    .attr("data-src-mp3","song2.mp3") 
    .attr("data-src-ogg","song2.ogg"); 

$("span[data-src-mp3]").click(function() { 
    var player = document.getElementById("player"), 
     $this = $(this); 

    if ($this.hasClass("selected")) { 
     if (player.paused) { 
      player.play(); 
     } else { 
      player.pause(); 
     } 
    } 
    else { 
     $("span[data-src-mp3].selected").removeClass("selected"); 
     $this.addClass("selected"); 
     $(player) 
      .empty() 
      .append($("<source>").attr("src", $this.attr("data-src-mp3"))) 
      .append($("<source>").attr("src", $this.attr("data-src-ogg"))) 
     player.play(); 
    } 
}); 

ライブデモ：http://jsfiddle.net/75lb/8cGBx/

Answer 2

が

代わりの

$('audio').bind('play','pause', function() { 

を行うことにより、あなたのコードによると

$('audio').bind('play pause', function(event) { 

を行い、これを試してみてくださいデフォールトオーディオは一時停止され、ユーザーがクリックすると再生が開始され、次にクリックすると一時停止します。

これはうまくいきます。