La mejor manera de reproducir sonido con HTML5 y Javascript

Estoy tratando de reproducir un sonido y he encontrado dos formas que me funcionan. ¿Cuál es la mejor manera y por qué? Es una buena idea agregar un oyente de eventos de "carga"?La mejor manera de reproducir sonido con HTML5 y Javascript

Primera forma:

$(document).ready(function() { 
    var audioElement = document.createElement('audio'); 
    audioElement.setAttribute('src', 'sound.ogg'); 
    audioElement.addEventListener("load", function(){ 
     audioElement.play(); 
    }, true); 

    audioElement.play(); 
});

Segunda forma:

$(document).ready(function() { 
    audioElement = new Audio('sound.ogg'); 
    audioElement.play(); 
});

Fuente

2011-12-06 Tom Sarduy

¿qué ocurre con la fuente de red para audio en caso de audio nuevo()? – vinnitu

Realmente debería ir con la primera (con load), porque 'DOMReady' no garantiza que el archivo de sonido termine de descargarse, al igual que con Image.

Fuente

2011-12-06 04:37:42 tungd

, pero ¿cuál es la mejor manera de inicializar un archivo de audio? 'new Audio ('sound.ogg');' o 'document.createElement ('audio');' ?? –

AFAIK son lo mismo, ambos crearán un nuevo 'HTMLAudioElement'. Sin embargo, el 'nuevo constructor de Audio()' es la antigua (a partir de pre-DOM1) y 'document.createElement()' es la forma más nueva (DOM2); no puede adjuntar el elemento creado con 'nuevo Audio()' a su documento. 'new Audio ('sound.ogg')' es el acceso directo para 'var a = new Audio(); a.src = 'sound.ogg'; '. – tungd

OK, he hecho una prueba aquí http://jsperf.com/new-audio-vs-document-createelement-audio – tungd

que realmente debe utilizar un sistema de detección de características para esto. Yo usaría Modernizr to test for HTML5 audio. De esta forma, solo intentará brindar el audio a quienes lo puedan obtener con HTML5.

Puede incluso test for HTML5 features y alternativa en alternativa si no se encuentra utilizando Modernizr. Estas alternativas se llaman "polyfills" y una lista de estos que Modernizr admite es here.

La ventaja de hacerlo de esta manera es que está cubriendo todas sus bases en términos de características del navegador. Compadezco a los tontos que todavía usan IE7.

Fuente

2011-12-06 04:01:52 Andrew

Sé de Modernizr, pero estoy tratando de reproducir sonido con el en el caso de IE, y estoy usando el script html5shiv en su lugar Modernizr –

La mejor manera de reproducir sonido con HTML5 y Javascript

Respuesta

Cuestiones relacionadas