JQueryで連続した曲を再生するには？

フロントエンドには、選択ボックスと音楽プレーヤーがあります。ここでJQueryで連続した曲を再生するには？

はサルボNostratoからの助けを借りて、私のhtmlのです：

<!DOCTYPE html> 
    <html> 
    <head> 
     <title> Test </title> 
     <script src="jquery-3.2.1.min.js"> </script> 
     <script src="whatToPlay.js"> </script> 
    </head> 

    <body onload="onload();"> 
     <select id="changeselection" name="change-selection"> 
      <option id="change1" value="change1" selected>Song 1</option> 
      <option id="change2" value="change2">Song 2</option> 
      <option id="change3" value="change3">Song 3</option> 
     </select> 

     <audio id="audio1" tabindex="0" controls="" type="audio/mpeg" controls preload> 
      <source id="audiochange" type="audio/mp3" src="audio/default.mp3"> 
       Sorry, your browser does not support HTML5 audio. 
     </audio> 

    </body> 
    </html>

と私のwhatToPlay.jsサルボNostrato（jQueryの）からの助けを借りてファイル：

$(document).ready(function() { 

    $("#changeselection").on("change",function(){ 

    audio=$("#audio1"); 
    $("#audio1").attr("src",src); 

    if($(this).val()=="change2"){ 
     var src = "audio/song2.mp3"; 
     console.log('change2'); 
    } 

    else if ($(this).val()=="change3"){ 
     var src = "audio/song3.mp3"; 
     console.log('change3'); 
    } 

    else { 
     var src = "audio/default.mp3"; 
     console.log('change1'); 
    } 

    audio=$("#audio1"); 
    $("#audio1").attr("src",src); 


    audio[0].pause(); 
    audio[0].load();//suspends and restores all audio element 
    audio[0].play(); 

    }); 
});

ソング2（id = "chang e2 "）、私はaudio/song2.mp3を再生したい、そしてそれが終わったらすぐにaudio/song2A.mp3を再生したい。最小限私のコードにこれをどのように追加するのですか？

出典

2017-06-17 user604803

[ 'onend'イベント]（https://www.w3schools.com/tags/av_event_ended.asp）を探し –

@LouysPatriceBessetteしかし、ここで私は私のjQueryでこれを追加する必要があります私は、オーディオ/ song2Aをしたい場合、ファイルSong2（id = "change2"）が選択されている場合、audio/song2.mp3の前に.mp3が来るのですか？私は他のオプションのどれにも影響を与えたくありません。 – user604803

endedイベントのイベントハンドラを使用する必要があります。

これは私がかなり速く入力したものです...それをテストしていません。
しかし、コメントはこのアイデアに役立つはずです。

$(document).ready(function() { 

    // Lookup for the audio element 
    var audio = $("#audio1"); 

    // Lookup for the select element 
    var audioChange = $("#changeselection"); 

    // Create an audio source array 
    var audioSources = [ 
    "audio/default.mp3", 
    "audio/song2.mp3", 
    "audio/song3.mp3" 
    ]; 

    // Select change handler 
    audioChange.on("change",function(){ 

    if($(this).val()=="change2"){ 
     var src = audioSources[1]; 
     console.log('change2'); 
    } 

    else if ($(this).val()=="change3"){ 
     var src = audioSources[2]; 
     console.log('change3'); 
    } 

    else { 
     var src = audioSources[0]; 
     console.log('change1'); 
    } 

    // Step 1 - Pause the playing audio 
    audio[0].pause(); 

    // Step 2 - Change the audio source using what the above contitions determined. 
    audio.attr("src",src); 

    // Step 3 - Load this new source 
    audio[0].load(); 

    // Step 4 - Play! 
    audio[0].play(); 

    }); 

    // Song ended handler 
    audio.on("ended", function() { 

    // Find what has just ended 
    var whichEnded = $(this).attr("src"); 

    // Find its index in the array 
    var thisSrcIndex = audioSources.indexOf(whichEnded); 

    // If last index, set it to -1 
    if(thisSrcIndex==audioSources.length-1){ 
     thisSrcIndex = -1; 
    } 

    // increment the index 
    thisSrcIndex++; 

    // Same steps as in the other handler here... 

    // Step 2 - Change the audio source using what the above contitions determined. 
    audio.attr("src",audioSources[thisSrcIndex]); 

    // Step 3 - Load this new source 
    audio[0].load(); 

    // Step 4 - Play! 
    audio[0].play(); 
    }); 

});

出典

2017-06-17 16:25:27

いいえ、ソング2の後にソングを追加したいわけではありません。これはHTML Webページ上でSong 1、Song 2、およびSong 3の選択肢のドロップダウンです。しかし、ユーザーがSong 2を選択すると、Song 2ファイルを再生し、すぐに歌2A。ソング1が選択されているときはソング1のみを再生し、ソング3を選択した場合はソング3だけを再生したい。 – user604803

それでは、同じロジックになります...しかし、もっと多くの配列を定義する必要があります。 "[audio/song2A.mp3"、 "audio/song2B.mp3"] 'のような"プレイリスト "＃2の配列のように。...アイデアは次のものを決定するために何が終わったのかをチェックすることです。 –

これは[this]（https://jsfiddle.net/cpb4ksxj/1/）の意味ですか？ * – user604803

JQueryで連続した曲を再生するには？

答えて

関連する問題