2012-02-23 34 views
19

Solo encontré otra solución pero estaba incompleta, así que necesito ayuda aquí.cambiar la fuente de audio con jquery y la etiqueta de audio HTML5

he puesto el audio hasta:

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

Tengo una tabla generada dinámicamente de enlaces para cambiar la pista:

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

tengo este jQuery que no tengo ni idea de qué hacer con para cambiar la pista

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

}); 

encontré esta función pero no la estoy usando de la manera correcta

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

¿Cuál es su problema? ¿Qué pasa cuando intentas cambiar? ¿Le da un error? ¿Y el código con la función '' change() ''' 'copia y pega directamente o son solo pedazos de código que ha extraído? – Ktash

+0

función de cambio es algo que encontré pero no funciona. arroja ahora error –

+1

Publique el error a continuación. ¿Cómo esperas que las personas te ayuden si no saben lo que está mal? – bububaba

Respuesta

59

Su función de cambio debe ser así:

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

Los problemas eran audio.empty() y la var audio. Intentaba agregar una etiqueta de audio vacía y no volvió a escribir la etiqueta de audio en el navegador.

+0

Gracias por la ayuda. Aclaró lo que estaba haciendo y funciona como un encanto. Espero haber otorgado la recompensa correctamente. –

+0

Resolvió mi problema. Parece que tiene que usar el método load(), de lo contrario, el reproductor HTML no cargará el sonido, incluso si el DOM se actualizó. ¡Gracias! – Shahar

+1

audio = $ ("# player") –

5

Es posible que también desee cambiar el nombre de la función ya que 'cambiar' ya es una función en el universo de jQuery.

Cuestiones relacionadas