jquery - HTML Select - 使用 jQuery 在选择时更改 src 音频

Question

我有一个菜单选择，有 3 首不同的歌曲可供选择。当我在下拉菜单中选择轨道时，我正在尝试切换歌曲。

我正在尝试使用 jQuery 来做到这一点，但没有结果。

这是代码

HTML

<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 loop>
<source id="audiochange" type="audio/mp3" src="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">
        Sorry, your browser does not support HTML5 audio.
    </audio>

查询

$(document).ready(function() {

$("#change1").on("click",function(){
     var src = "http://www.archive.org/download/bolero_69/Bolero.mp3";
     $("#audiochange").attr("src",src);
 });

$("#change2").on("click",function(){
     var src = "http://www.archive.org/download/bolero_69/Bolero.mp3";
     $("#audiochange").attr("src",src);
 });

$("#change3").on("click",function(){
     var src = "http://www.archive.org/download/bolero_69/Bolero.mp3";
     $("#audiochange").attr("src",src);
 });
    });

有什么建议吗？

这里的 fiddle

http://jsfiddle.net/BAR35/

Answer 1

更改音频源后，您需要以下代码。

 audio=$("#audiochange");
 audio[0].pause();
 audio[0].load();//suspends and restores all audio element
 audio[0].play();

你也有不正确的js，它不会在选项更改上起作用。试试这个:

$("#changeselection").on("change",function(){
 if($(this).val()=="change1")
  var src = "http://www.archive.org/download/bolero_69/Bolero.mp3";
 else if($(this).val()=="change2"){
   var src = "http://www.archive.org/download/bolero_69/Bolero.mp3";
 else 
   var src = "http://www.archive.org/download/bolero_69/Bolero.mp3";
  $("#audiochange").attr("src",src);
  audio=$("#audiochange");
  audio[0].pause();
  audio[0].load();//suspends and restores all audio element
  audio[0].play();
});});