创建可以在音频播放器中播放的音乐的 HTML 下拉列表答案

【问题标题】：Create HTML dropdown list of music that can be played inside an audio player创建可以在音频播放器中播放的音乐的 HTML 下拉列表
【发布时间】：2016-10-27 08:26:22
【问题描述】：

我正在尝试为我的网站创建一个简单的音乐播放器，用户可以在其中从下拉列表中选择多个不同的音乐曲目。音乐存储在我们的服务器上。

这是我目前所拥有的：http://jsfiddle.net/rUf6j/7/ 我只需要将选项移动到下拉列表中。

HTML：

<audio id="player" controls="controls">
    <source id="mp3_src" src="/teachings/2011_01_09_Cut.mp3" type="audio/mp3" />
      Your browser does not support the audio element.
</audio>

<table>
    <tr>
        <td>Flying in clouds</td>
        <td><a href="#" source="http://www.culturedub.com/assets/04-Forward.mp3">Listen</a></td>
    </tr>
    <tr>
        <td>Chilling on beach</td>
        <td><a href="#" source="http://www.culturedub.com/assets/04-Moringa-JahYu-Remix-feat-BaNdula-1.mp3">Listen</a></td>
    </tr>
</table>

jQuery：

$(document).ready(function(){
    $('[source]').on('click', function(){
        change( $(this).attr('source')  );
    });
});

JS：

 function change(sourceUrl) {
    var audio = document.getElementById("player"),
    source = document.getElementById("mp3_src");
    source.src = sourceUrl;
    audio.pause();
    audio.load();
    audio.play();
 }

【问题讨论】：

标签： javascript html audio-player

【解决方案1】：

只需将链接移动到select，其中option 值是指向源的链接，文本是歌曲名称。将事件更改为.on('change')

$(document).ready(function() {

  $('#selection').on('change', function() {
    change($(this).val());
  });

});


function change(sourceUrl) {
  var audio = document.getElementById("player");
  var source = document.getElementById("mp3_src");

  audio.pause();

  if (sourceUrl) {
    source.src = sourceUrl;
    audio.load();
    audio.play();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<label for="selection">Listen:</label>
<select id="selection">
  <option value="">- Select track -</option>
  <option value="http://www.culturedub.com/assets/04-Forward.mp3">Flying in clouds</option>
  <option value="http://www.culturedub.com/assets/04-Moringa-JahYu-Remix-feat-BaNdula-1.mp3">Chilling on beach</option>
</select>
<br/>

<audio id="player" controls="controls">
  <source id="mp3_src" src="/teachings/2011_01_09_Cut.mp3" type="audio/mp3" />Your browser does not support the audio element.
</audio>

【讨论】：

【解决方案2】：

监听<select>的改变事件，根据<option>的值改变音频。

HTML：

<label>Select a track:
  <select id="songpicker">
    <option selected="" disabled>Select a track</option>
    <option value="http://www.culturedub.com/assets/04-Forward.mp3">Flying in clouds</option>
    <option value="http://www.culturedub.com/assets/04-Moringa-JahYu-Remix-feat-BaNdula-1.mp3">Chilling on beach</option>
  </select>
</label>

JavaScript：

$('#songpicker').on('change', function() {
    change( $(this).val()  );
})

【讨论】：

【解决方案3】：

$('#songpicker').on('change', function() {
    change( $(this).val()  );
})

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<label>Select a track:
  <select id="songpicker">
    <option selected="" disabled>Select a track</option>
    <option value="http://www.culturedub.com/assets/04-Forward.mp3">Flying in clouds</option>
    <option value="http://www.culturedub.com/assets/04-Moringa-JahYu-Remix-feat-BaNdula-1.mp3">Chilling on beach</option>
  </select>
</label>

【讨论】：

这不仅会引发错误，而且也不是很有帮助。请添加说明。