如何使用JQuery播放連續歌曲？

這裏是我的HTML，以幫助從齊射Nostrato：

<!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「），我想播放音頻/ song2.mp3，然後在播放結束後立即播放audio/song2A.mp3。我如何最低限度地將此添加到我的代碼？

來源

2017-06-17 user604803

查找['onend'事件]（https://www.w3schools.com/tags/av_event_ended.asp） –

@LouysPatriceBessette但我應該在哪裏添加這在我的jQuery的文件，如果我想音頻/ song2A .mp3在選擇了歌曲2（id =「change2」）時是否只有audio/song2.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網頁上，有一個用於選擇歌曲1，歌曲2和歌曲3的下拉菜單。但是，當用戶選擇歌曲2時，我想要播放歌曲2文件，然後立即宋2A。當選擇樂曲1時，我只想要樂曲1播放，當選擇樂曲3時，我只想要樂曲3播放。 – user604803

所以，這將是相同的邏輯......但你必須定義更多的數組。就像'[「audio/song2A.mp3」，「audio/song2B.mp3」]這樣的「播放列表」＃2的數組，''想法是檢查結束以確定下一步是什麼。 –

這是[this]（https://jsfiddle.net/cpb4ksxj/1/）你的意思是？ *（不起作用）* – user604803

如何使用JQuery播放連續歌曲？

回答

相關問題