29

I have only found one other solution but it was incomplete so I need help here.

i have the audio set up:

<audio id="player" controls="controls">
          <source id="ogg_src" src="lib/audio/barger01.ogg" type="audio/ogg" />
          <source id="mp3_src" src="lib/audio/barger01.mp3" type="audio/mp3" />
          Your browser does not support the audio element.
    </audio>

I have a dynamically generated table of links to change the track:

<div id="audio_list">
   <a href="#" class="track" data-location="http://www.newoggtrack.ogg">sample</a>
</div>

i have this jquery that i have no clue what to do with to change the track

$('.track').click(function(){

    load_track = $(this).attr('data-location');//gets me the url of the new track

    change_track(load_track);// function to change the track of the loaded audio player without page refresh preferred...

});

i found this function but i am not using it the right way

 function change_track(sourceUrl) {

        audio.empty();
        $("#ogg_src").attr("src", sourceUrl).appendTo(audio);
        /****************/
        audio[0].pause();
        audio[0].load();//suspends and restores all audio element
        /****************/
    }

audio = $("<audio>").attr("id", "player")
                        .attr("preload", "auto");
Praveen Gowda I V
  • 9,569
  • 4
  • 41
  • 49
Daniel Hunter
  • 2,546
  • 6
  • 28
  • 34
  • 2
    What is your problem? What happens when you try and switch? Do you get an error? And is the code with the `function change()` a direct copy and paste or is it just pieces of code you've pulled out? – LoveAndCoding Feb 27 '12 at 19:32
  • change function is something i found but it does not work. it throws now error – Daniel Hunter Feb 27 '12 at 20:53
  • 1
    Post the error then. How do you expect people to help you if they don't know what's wrong? – bububaba Feb 29 '12 at 12:34

2 Answers2

87

Your change function should be like this:

function change(sourceUrl) {
    var audio = $("#player");      
    $("#ogg_src").attr("src", sourceUrl);
    /****************/
    audio[0].pause();
    audio[0].load();//suspends and restores all audio element

    //audio[0].play(); changed based on Sprachprofi's comment below
    audio[0].oncanplaythrough = audio[0].play();
    /****************/
}

The problems were audio.empty() and the audio var. You were attempting to append an emptied audio tag, and didn't write out the audio tag back to the browser.

Justice Erolin
  • 2,869
  • 20
  • 19
  • Thank you for the help. It cleared up what i was doind and works like a charm. I hope i awarded the bounty correctly. – Daniel Hunter Mar 06 '12 at 21:16
  • Solved my problem. Seems you have to use the load() method, otherwise the HTML player won't actually load the sound, even if the DOM was updated. thanks! – Shahar Dec 19 '12 at 22:48
  • Also why not audio[1] or just audio? I wish I knew enough javascript to know a way to get the answer myself. I php I would have done a print_r on audio. – David 天宇 Wong Dec 05 '13 at 00:06
  • @David天宇Wong, jQuery returns an array, so this takes the first instance of that array. – Justice Erolin Dec 05 '13 at 00:07
  • yeah my question was more, what's in the second instance for example ? – David 天宇 Wong Dec 05 '13 at 00:27
  • audio[0] is the DOM object rather than the jQuery object. Only the DOM object has a .play() method. – Sprachprofi Dec 12 '13 at 15:59
  • 6
    Note that I ran into problems with this code because often the audio isn't yet fully loaded when play() is called and then it ignores the play() instruction. So I changed that to audio[0].oncanplaythrough = audio[0].play() . – Sprachprofi Dec 12 '13 at 16:01
  • 1
    Merged suggestion from @Sprachprofi, nearly two years later :) – Justice Erolin Aug 30 '15 at 00:14
6

You might also want to rename the function since 'change' is already a function in the jQuery universe.

Jay Blanchard
  • 34,243
  • 16
  • 77
  • 119