2017-03-22 3 views
1

私は再生ボタンとしてテキストリンクのみで同じWebページにオーディオファイルのリストを再生しようとしていましたが、私にとって本当に完璧な以下の解決策が見つかりました: このスクリプトの@linstantnoodles!)このコードの別のオーディオトラックが開始したら、1つのオーディオトラックを停止するにはどうすればよいですか? (テキストリンクのみ)

<audio id="song1" preload='auto'> 
<source src='song1.mp3' type='audio/mp3' /> 
</audio> 

<audio id="song2" preload='auto'> 
<source src='song2.mp3' type='audio/mp3' /> 
</audio> 

<a href="javascript:null()" id="song1-control">Listen</a> 
<a href="javascript:null()" id="song2-control">Listen</a> 

<script type="text/javascript"> 
// List of audio/control pairs 
var playlist = [{ 
    "audio": document.getElementById('song1'), 
    "control": document.getElementById('song1-control') 
}, { 
    "audio": document.getElementById('song2'), 
    "control": document.getElementById('song2-control') 
}]; 

for (var i = 0; i < playlist.length; i++) { 
    var obj = playlist[i]; 
    var audio = obj.audio; 
    var control = obj.control; 
    // returns a closure 
    var listener = function (control, audio) { 
     return function() { 
      var pause = control.innerHTML === 'Pause'; 
      control.innerHTML = pause ? 'Listen' : 'Pause'; 
      // Update the Audio 
      var method = pause ? 'pause' : 'play'; 
      audio[method](); 
      // Prevent Default Action 
      return false; 
     } 
    }; 
control.addEventListener("click", listener(control, audio)); 
} 
</script> 

私の唯一の問題の両方が同時に演奏され、1曲が再生されている、と私は二番目を開始した場合ということ、です。私はこの問題を解決するために多くの方法を試しましたが、どれもうまくいきませんでした。どのようにして調整する必要があります。ありがとう!

答えて

0

このようなことができます。新しいオーディオが開始されたら、playlistアレイをループして、今起動していないオーディオ要素をすべて見つけて停止します。ここで

は一例です:

.... 
var method = pause ? 'pause' : 'play'; 
audio[method](); 
if(!pause){ 
    playlist.forEach(function(pl){ 
     if(pl.audio !== audio){ 
      pl.audio.pause(); 
      pl.audio.currentTime = 0; 
      pl.control.innerHTML = 'Listen'; 
     } 
    }); 
} 
.... 
+0

は、あなたの速い応答をさんありがとうございました! 'pl.audio.stop()'では動作しませんでしたが、 'pl.audio.pause(); pl.audio.currentTime = 0; '。唯一の欠点は、最初のファイルからのテキストリンク再生ボタンがまだ「一時停止」に設定されていることです。前のボタンをすべて「リッスン」にリセットする可能性はありますか? innerHTML値を変更しようとしましたが、トラックをもう一時停止できませんでした。 – modestus

+0

@modestusすべての問題を解決するために私の答えを編集しました。 – Titus

+0

完璧に動作します、ありがとうございます! – modestus

関連する問題