如何使用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播放连续歌曲？

回答

相关问题