Search code examples
jqueryhtmlselectaudiosrc

HTML Select - change src Audio on select with jQuery


I have a menu select with 3 different song to choose. I am trying to switch the song when I select the track in the menu drop.

I am trying using jQuery to do that but with no results.

this is the code

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>

JQUERY

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

Any Advice?

here the fiddle

http://jsfiddle.net/BAR35/


Solution

  • http://jsfiddle.net/salvonostrato/BAR35/4/

    Solved Thanks

    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>
    

    JQUERY

    $(document).ready(function() {
    
    $("#changeselection").on("change",function(){
    
        if($(this).val()=="change2"){
      var src = "http://www.archive.org/download/bolero_69/Bolero.mp3";
            console.log('change2');
        }
    
        else if ($(this).val()=="change3"){
          var src = "http://www.archive.org/download/CanonInD_261/CanoninD.mp3";
            console.log('change3');
        }  
    
        else {
          var src = "http://www.archive.org/download/CanonInD_261/CanoninD.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();
    
    });
    });