如何用 JQuery 播放连续的歌曲？答案

【问题标题】：How to play consecutive songs with JQuery?如何用 JQuery 播放连续的歌曲？
【发布时间】：2017-06-18 00:31:18
【问题描述】：

在前端，有一个选择框和一个音乐播放器。

这是我的 html，在 Salvo 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 文件，在 Salvo 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="change2") 时，我想播放 audio/song2.mp3，然后在结束时，我想播放 audio/song2A.mp3立即地。如何将其添加到我的代码中？

【问题讨论】：

寻找onend event
@LouysPatriceBessette 但是，如果我希望 audio/song2A.mp3 在选择歌曲 2 (id="change2") 时仅在 audio/song2.mp3 之前出现，我应该在我的 jQuery 文件中的哪个位置添加它？我不希望它影响任何其他选项。

标签： jquery html audio

【解决方案1】：

您必须为ended 事件使用事件处理程序。

这是我输入得很快的东西......没有测试它。
但是 cmets 应该对这个想法有所帮助。

$(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();
  });

});

【讨论】：

不，我不是要在序列中的歌曲 2 之后添加歌曲。是这样的：在 HTML 网页上，有一个选择歌曲 1、歌曲 2 和歌曲 3 的下拉菜单。但是，当用户选择歌曲 2 时，我希望播放歌曲 2 文件，然后立即播放歌曲 2A。 When Song 1 is selected, I want only Song 1 to play, and when Song 3 is selected, I want only Song 3 to play.
所以，这将是相同的逻辑......但你必须定义更多的数组。就像“播放列表”#2 的数组一样 ["audio/song2A.mp3","audio/song2B.mp3"]... 这个想法是检查已经结束的内容以确定接下来的内容。
这是this 你的意思吗？ （没用）
（当我从下拉列表中选择不同的选项时，播放器没有更新/更改歌曲，或者代码的 audioSources 部分有问题。）
Here 是。我用过的声音太可怕了……哈哈，但这很管用。