web-dev-qa-db-fra.com

changer de source audio avec jquery et balise audio HTML5

Je n'ai trouvé qu'une autre solution mais elle était incomplète, j'ai donc besoin d'aide ici.

j'ai la configuration audio:

<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>

J'ai une table de liens générée dynamiquement pour changer la piste:

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

j'ai ce jquery que je n'ai aucune idée de quoi faire avec pour changer la piste

$('.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...

});

j'ai trouvé cette fonction mais je ne l'utilise pas correctement

 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");
jqueryhtml5audiohtml5-audio
25
Daniel Hunter

Votre fonction de changement devrait être comme ceci:

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

Les problèmes étaient audio.empty () et la var audio. Vous tentiez d'ajouter une balise audio vide et vous n'avez pas réécrit la balise audio dans le navigateur.

74
Justice Erolin

Vous pouvez également vouloir renommer la fonction car "changer" est déjà une fonction dans l'univers jQuery.

6
Jay Blanchard