2011-07-05 26 views
25

Estoy tratando de usar un botón para iniciar una pista en una etiqueta de audio HTML5 utilizando jQuery, pero sigo recibiendo un error.HTML5 Audio y jQuery

var song = $('#audio'); 

$('#play').click(function() { 
song.play(); 
}); 

Cuando uso document.getElementById ('audio'), funciona, pero cuando se utiliza el selector de jQuery me sale el siguiente error:

TypeError no detectada: Object [object Object] no tiene un método ' juego '

Gracias por cualquier ayuda.

Respuesta

56

intentar conseguir el elemento DOM nativa como jQuery no sabe nada sobre .play método de la matriz envuelta devuelto por el selector $('#audio'):

song.get(0).play(); 
+3

que funcionó ... ¿por qué? Podría dar una breve explicación, solo para que lo entiendo. ¡¡Gracias!! – user699242

+7

@ user699242, cuando usa '$ ('.. some selector ..')' esto devuelve una matriz de objetos DOM reales que coinciden con su selector. El método .play es un método HTML5 nativo que necesita invocar en el elemento DOM nativo real. Por lo tanto, debe obtener este elemento DOM nativo de la matriz que devuelve el selector jQuery. Y debido a que está utilizando un selector de id ('# audio') podemos suponer que hay un solo elemento en su DOM que coincide con este selector para que podamos usar' .get (0) 'de forma segura para recuperarlo. Entonces, básicamente, cuando usas '$ (...)' puedes invocar solo funciones jQuery en el resultado y 'play' no es –

+0

Realmente ayuda. Sin embargo, ¿por qué informa un error indefinido cuando se usa .get (0) .tagName? – panda

13

También puede escribir como song.trigger('play');. Eso le permitirá usar el selector $('#audio');.

3

En lugar de .get() sólo tiene que utilizar la notación de objetos:

var song = $('#audio'); 

$('#play').click(function() { 
    song[0].play(); 
}); 

Es que escribir menos :)