¿Cómo elimino correctamente el audio html5 sin agregar a DOM?

Con Javascript, tengo una función que crea un elemento de audio con createElement("audio"), y comienzo a jugar en loop sin usar appendChild(), quiero decir sin agregarlo al DOM. El elemento creado se guarda en una variable, vamos a lo llamaron music1:¿Cómo elimino correctamente el audio html5 sin agregar a DOM?

music = document.createElement("audio"); 
music.addEventListener("loadeddata", function() { 
music.play(); 
}); 
music.setAttribute("src", music_Source);

Lo que me gustaría hacer, es cambiar la música que se reproduce, si es posible utilizar la misma función, y almacenar el elemento de la misma variable.

Lo que hago es que antes de que el código anterior:

if(typeof(music) == "object") { 
music.pause(); 
music = null; 
}

Pero: si quito music.pause(), la primera música sigue sonando, y el segundo comienza a jugar demasiado al mismo tiempo, lo que me hace pensar que la primera música está siempre en algún lugar del documento/en la memoria. Además, music = null parece inútil. No quiero usar jQuery.

¿Tiene alguna idea de eliminar correctamente la primera música, eliminar el elemento, etc.?

En realidad, el comentario de kennis es correcto, intenté simplemente cambiar el atributo src, y no modificar la variable "música" (ni establecerlo en nulo, ni volver a crear un elemento) y parece que también funciona. Por lo tanto, para el registro: Para cambiar aquí cada fuente es la función:

if(typeof(music) != "object") { 
    //audio element does not exist yet: 
    music = document.createElement("audio"); 
    music.addEventListener("loadeddata", function() { 
    music.play(); 
    }); 
} 
music.setAttribute("src", music_Source);

Fuente

2012-01-14 Jo Pango

¡Ya ha respondido su pregunta! 'music.pause()' antes de eliminar el objeto. –

¿Hay alguna razón por la que no desee simplemente cambiar el atributo 'src' cuando esté listo para comenzar la nueva canción? –

@kennis En realidad, 'music.setAttribute (" src ", music_Source);' se llama de nuevo con la nueva music_Source para la segunda música, así que supongo que eso es lo que quiere decir, cambio el atributo src. @Francis Avila Pero no estoy realmente convencido de que music.pause() antes de borrar permita que la música anterior sea "eliminada" de la manera adecuada. O tal vez extraño algo, o no me explico lo suficiente :) –

en lugar de eliminar, el mejor modo de hacerlo sería cambiar el src

music.setAttribute('src',theNewSource); //change the source 
music.load(); //load the new source 
music.play(); //play

de esa manera estás siempre lidiando con el mismo objeto, por lo que toca el DOM con menos frecuencia, y también evita el problema de tener dos jugadores al mismo tiempo

También asegúrese de utilizar el método .load para cargar el nuevo audio, de lo contrario lo hará sigue jugando el viejo.

Fuente

2012-01-15 14:17:15

En realidad, parece que funciona sin carga(), la música anterior se detiene y la nueva comienza a reproducirse. Parece que la música comienza a cargarse cuando se cambia la fuente (al menos en Chrome, ya que trabajo en una aplicación webkit específica). Pero cambiar la fuente es de hecho la solución. –

El objeto original se eliminará, pero solo cuando el recolector de basura determine que es hora. El hecho de que sea audio puede complicar las cosas y dificultar que el navegador tome esa determinación.

Por lo tanto, sí, simplemente vuelva a utilizar el objeto original.

Fuente

2012-01-15 14:26:54

¿Cómo elimino correctamente el audio html5 sin agregar a DOM?

Respuesta

Cuestiones relacionadas