commutateur de source audio avec jquery et HTML5 audio tag

J'ai seulement trouvé une autre solution, mais il était incomplet, donc j'ai besoin d'aide ici.

j'ai de 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 généré dynamiquement, un tableau de liens pour changer la piste:

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

j'ai cette jquery que je n'ai aucune idée de quoi faire 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 suis pas de l'utiliser de la bonne façon

 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");
  • Quel est votre problème? Ce qui se passe quand vous essayez de le changer? Ne vous obtenez une erreur? Et c'est le code avec la function change() directement copier et coller ou est-ce juste des morceaux de code que vous avez tiré?
  • fonction de changement est quelque chose que j'ai trouvé mais il ne fonctionne pas. il jette maintenant d'erreur
  • Afficher le message d'erreur ensuite. Comment voulez-vous que les gens à vous aider si ils ne savent pas quel est le problème?
InformationsquelleAutor Daniel Hunter | 2012-02-23
  1. 72

    Votre changement de fonction 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 audio.empty() et de l'audio var. Vous essayez d'ajouter une vidé balise audio, et de ne pas écrire la balise audio au navigateur.

    • Je vous remercie pour l'aide. Il éclairci ce que j'ai été doind et fonctionne comme un charme. J'espère que j'ai reçu le bounty correctement.
    • Résolu mon problème. Semble que vous devez utiliser la méthode load (), sinon le HTML joueur de ne pas charger les sons, même si le DOM a été mis à jour. merci!
    • audio = $("#joueur")
    • Aussi pourquoi ne pas audio[1] ou audio? Je souhaite que je savais assez de javascript à savoir un moyen d'obtenir la réponse moi-même. Je php, j'aurais fait un print_r sur l'audio.
    • jQuery retourne un tableau, donc c'est le premier exemple de ce tableau.
    • oui ma question était plus, ce qui est en deuxième instance, par exemple ?
    • audio[0] est l'objet DOM, plutôt que de l'objet jQuery. Seulement l'objet DOM a un .méthode play ().
    • Notez que j'ai couru dans des problèmes avec ce code, car souvent l'audio n'est pas complètement chargé lors de la lecture() est appelée et puis il ignore le play() l'instruction. Donc j'ai changé pour de l'audio[0].oncanplaythrough = audio[0].play() .
    • Merci man, m'a aidé aussi.
    • Fusionné suggestion de @Sprachprofi, près de deux ans plus tard 🙂

    InformationsquelleAutor Justice Erolin
  2. 5

    Vous pouvez également renommer la fonction depuis le "changement" est déjà une fonction dans le jQuery univers.

    InformationsquelleAutor Jay Blanchard