Question

我提出，从下拉列表中播放文件的音频播放器，但我需要发挥它从一个列表中选择文件，并继续播放，直至到达在其他列表中的其他选定的文件（例如用户点击{ 2中的{1}}和First List中的7，并且播放器连续播放文件2、3、4、5、6、7。

除了主列表外，我还向列表中添加了另一个列表，但是我不确定如何使其从选择中播放文件。这是当前需要编辑的代码：https://jsfiddle.net/m1Lpg570/

HTML：

Second List

JS：

<label for="selection">From:</label>
<select id="selection">
  <option value="">- First List -</option>
  <option value="http://marvelhotelbangkok.com/audio/1.mp3">1</option>
  <option value="http://marvelhotelbangkok.com/audio/2.mp3">2</option>
  <option value="http://marvelhotelbangkok.com/audio/3.mp3">3</option>
  <option value="http://marvelhotelbangkok.com/audio/4.mp3">4</option>
  <option value="http://marvelhotelbangkok.com/audio/5.mp3">5</option>
</select>

<label for="selection">&nbsp;&nbsp;&nbsp;&nbsp;To:</label>
<select id="selection">
  <option value="">- Second List -</option>
  <option value="http://marvelhotelbangkok.com/audio/6.mp3">6</option>
  <option value="http://marvelhotelbangkok.com/audio/7.mp3">7</option>
  <option value="http://marvelhotelbangkok.com/audio/8.mp3">8</option>
</select>

<br/><br/>

<audio id="player" controls="controls">
  <source id="mp3_src" src="http://marvelhotelbangkok.com/audio/0.mp3" type="audio/mp3" />
</audio>

Answer 1

这就是你想要的吗？

HTML文件：

<label for="from">From:</label>
<select id="from">
  <option value="">- First List -</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<label for="to">&nbsp;&nbsp;&nbsp;&nbsp;To:</label>
<select id="to">
  <option value="">- Second List -</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
</select>

<br/><br/>

<audio id="player" controls="controls">
  <source id="mp3_src" src="http://marvelhotelbangkok.com/audio/0.mp3" type="audio/mp3" />
</audio>

JS文件

$(document).ready(function() {

    var audioUrls = [
    "http://marvelhotelbangkok.com/audio/0.mp3",
    "http://marvelhotelbangkok.com/audio/1.mp3",
    "http://marvelhotelbangkok.com/audio/2.mp3",
    "http://marvelhotelbangkok.com/audio/3.mp3",
    "http://marvelhotelbangkok.com/audio/4.mp3",
    "http://marvelhotelbangkok.com/audio/5.mp3",
    "http://marvelhotelbangkok.com/audio/6.mp3",
    "http://marvelhotelbangkok.com/audio/7.mp3",
    "http://marvelhotelbangkok.com/audio/8.mp3",
  ]

  $('select').on('change', function() {
    var from = $("#from").val();
    var to = $("#to").val();
    if (!from || !to) return;
    var audio = $("#player");
    audio[0].pause();
    $("#mp3_src").attr("src", audioUrls[from]);    
    audio.data("currentidx", from);
    audio[0].load();
    audio[0].play();
  });

  $("#player").on("ended", function() {
    var from = $("#from").val();
    var to = $("#to").val();
    if (!from || !to) return;
    var audio = $("#player");   
    var currentIdx = audio.data("currentidx") || 1;
    currentIdx++;
    var to = $("#to").val() || 8;
    if(currentIdx <= to){
        $("#mp3_src").attr("src", audioUrls[currentIdx]);
        audio.data("currentidx", currentIdx)
        audio[0].load();
        audio[0].play();
    }
  })

});

网址

https://jsfiddle.net/0cpjw7rk/12/

html5音频播放器：从曲目播放/播放曲目

1 个答案: