2012-02-23 22 views
19

Ho trovato solo un'altra soluzione ma era incompleta quindi ho bisogno di aiuto qui.cambia sorgente audio con tag audio jQuery e HTML5

ho l'audio impostato:

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

Ho una tabella generati dinamicamente di link per cambiare la traccia:

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

ho questo jquery che non ho idea di cosa fare con per cambiare la traccia

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

}); 

ho trovato questa funzione ma non la sto utilizzando nel modo giusto

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"); 
+2

Qual è il tuo problema? Cosa succede quando provi e cambi? Hai un errore? Ed è il codice con 'function change()' una copia e incolla diretta o sono solo pezzi di codice che hai estratto? La funzione di modifica – Ktash

+0

è stata trovata ma non funziona. getta ora l'errore –

+1

quindi pubblica l'errore. Come ti aspetti che le persone ti aiutino se non sanno cosa c'è che non va? – bububaba

risposta

59

La vostra funzione modifica dovrebbe essere simile a questo:

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

I problemi erano audio.empty() e l'audio var. Stavi tentando di aggiungere un tag audio svuotato e non hai scritto il tag audio sul browser.

+0

Grazie per l'aiuto. Ha chiarito cosa stavo facendo e funziona come un fascino. Spero di aver assegnato la taglia correttamente. –

+0

Risolto il mio problema. Sembra che devi usare il metodo load(), altrimenti il ​​player HTML non caricherà effettivamente il suono, anche se il DOM è stato aggiornato. Grazie! – Shahar

+1

audio = $ ("# player") –

5

Si potrebbe anche voler rinominare la funzione poiché 'modifica' è già una funzione nell'universo jQuery.