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");
3
  • 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? Feb 27, 2012 at 19:32
  • change function is something i found but it does not work. it throws now error Feb 27, 2012 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, 2012 at 12:34

2 Answers 2

87
+50

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.

8
  • Thank you for the help. It cleared up what i was doind and works like a charm. I hope i awarded the bounty correctly. Mar 6, 2012 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, 2012 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. Dec 5, 2013 at 0:06
  • 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() . Dec 12, 2013 at 16:01
  • 1
    Merged suggestion from @Sprachprofi, nearly two years later :) Aug 30, 2015 at 0:14
6

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.