再生と一時停止だけでJavascriptのオーディオプレイリストを作成する

Question

再生と一時停止しかできないオーディオプレイリストを作成したいと思います。しかし、ユーザーが曲全体を聴いているときに、そのユーザーが曲を再生できるようにしたい。

現在のところ、Javascriptプレイリストは音楽の再生と停止のみを行います。私の一時停止ボタンは、一時停止ボタンのように実際には機能しません。どこが間違っているのか分かりません。そして、ユーザーが曲を聴き終えたら、自動的に曲を最初に自動的に再設定することはできますか？私は非常にこの上の助けに感謝します！私はすでにHTMLオーディオコードを書いており、その下にJava Scriptがリストされています。

<script> // play/pause button 
$(function() { 
    $('#play').click(function(){ 
    $('#pause').attr('src',"media/pause.png"); 
    }); 
}); 

    $(".playBtn").on('click', function() { 
     var target = $(this).attr("target"); 
     $("#audio").attr("src",target); 

     $("#audio").trigger("play"); 
    }); 

    $(".pauseBtn").on('click', function() { 
     $("#audio").trigger("pause"); 
    }); 
    }); 
</script> 

Answer 1

オーディオタグには、リスナーを追加できるイベントがいくつかあります。 https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

オーディオの再生が終了すると「終了」イベントがトリガーされるため、オーディオが最後に達したときに曲を先頭にリセットするのに役立ちます。

$("#audio").on("ended", function() { 
    this.currentTime = 0; 
}); 

Answer 2

あなたは<audio>要素に連続ループ単一のオーディオソースでloop属性を使用することができます。代用キャッシュ<audio>DOM jQueryオブジェクトの呼び出しは、.play()、.pause()、clickイベントで呼び出すことができます。

javascriptの

$(function() { 
    var audio = $("#audio")[0]; 

    $(".playBtn").on("click", function() { 
    audio.play() 
    }); 

    $(".pauseBtn").on("click", function() { 
    audio.pause() 
    }); 
}) 

HTML

<audio id="audio" src="/path/to/audio/source" loop autoplay controls></audio> 
<button class="playBtn">Play</button> 
<button class="pauseBtn">Pause</button> 

jsfiddle https://jsfiddle.net/kkf33dpr/