javascript - reproducir - insertar video en html5
¿Cómo precargar un sonido en Javascript? (6)
Puedo precargar imágenes fácilmente gracias a la función de onload . Pero no funciona con audio. Los navegadores como Chrome, Safari, Firefox, etc. no son compatibles con las funciones de onload de la etiqueta de audio.
¿Cómo precargo un sonido en Javascript sin usar las bibliotecas JS y sin usar o crear etiquetas HTML?
¿Intentó hacer una solicitud de Ajax para el archivo? No lo mostrarías / usarías hasta que estuviera completamente cargado.
Ej. JQuery: ¿cómo precarga el sonido? (no tendrías que usar jQuery).
Dependiendo de su navegador de destino, puede ser suficiente establecer el atributo prelaod en la etiqueta de audio .
Intenté la respuesta aceptada por tylermwashburn y no funcionó en Chrome. Así que seguí y creé esto y se beneficia de jQuery. También olfatea para soporte ogg y mp3. El valor predeterminado es ogg porque algunos expertos dicen que un archivo ogg de 192KBS es tan bueno como un MP3 de 320KBS, por lo que ahorras un 40% en tus descargas de audio requeridas. Sin embargo, se requiere mp3 para IE9:
// Audio preloader
$(window).ready(function(){
var audio_preload = 0;
function launchApp(launch){
audio_preload++;
if ( audio_preload == 3 || launch == 1) { // set 3 to # of your files
start(); // set this function to your start function
}
}
var support = {};
function audioSupport() {
var a = document.createElement(''audio'');
var ogg = !!(a.canPlayType && a.canPlayType(''audio/ogg; codecs="vorbis"'').replace(/no/, ''''));
if (ogg) return ''ogg'';
var mp3 = !!(a.canPlayType && a.canPlayType(''audio/mpeg;'').replace(/no/, ''''));
if (mp3) return ''mp3'';
else return 0;
}
support.audio = audioSupport();
function loadAudio(url, vol){
var audio = new Audio();
audio.src = url;
audio.preload = "auto";
audio.volume = vol;
$(audio).on("loadeddata", launchApp); // jQuery checking
return audio;
}
if (support.audio === ''ogg'') {
var snd1 = loadAudio("sounds/sound1.ogg", 1); // ie) the 1 is 100% volume
var snd2 = loadAudio("sounds/sound2.ogg", 0.3); // ie) the 0.3 is 30%
var snd3 = loadAudio("sounds/sound3.ogg", 0.05);
// add more sounds here
} else if (support.audio === ''mp3'') {
var snd1 = loadAudio("sounds/sound1.mp3", 1);
var snd2 = loadAudio("sounds/sound2.mp3", 0.3);
var snd3 = loadAudio("sounds/sound3.mp3", 0.05);
// add more sounds here
} else {
launchApp(1); // launch app without audio
}
// this is your first function you want to start after audio is preloaded:
function start(){
if (support.audio) snd1.play(); // this is how you play sounds
}
});
Además: Aquí hay un convertidor mp3 a ogg: http://audio.online-convert.com/convert-to-ogg O puede usar VLC Media player para convertir. Verifique su velocidad de bits de mp3 haciendo clic derecho en el archivo mp3 (en Windows) y vaya a los detalles del archivo. Intente reducir en un 40% al seleccionar su nueva tasa de bits para su nuevo archivo ''ogg''. El convertidor puede arrojar un error, así que sigue aumentando el tamaño hasta que sea aceptado. Por supuesto, prueba sonidos de calidad satisfactoria. También (y esto se aplica a mí) si está utilizando VLC Media Player para probar sus pistas de audio, asegúrese de configurar el volumen al 100% o menos o de lo contrario, escuchará la degradación del audio y podría pensar erróneamente que es el resultado de la compresión.
Remy ideó una solución para iOS que utiliza el concepto sprite:
http://remysharp.com/2010/12/23/audio-sprites/
No estoy seguro de que aborde directamente la precarga, pero tiene la ventaja de que solo necesita cargar un archivo de audio (que también es un inconveniente, supongo).
Su problema es que los objetos de audio no admiten el evento ''cargar''.
En cambio, hay un evento llamado ''canplaythrough'' que no significa que está completamente cargado, pero está cargado lo suficiente que con la velocidad de descarga actual, terminará cuando la pista haya tenido tiempo suficiente para jugar.
Entonces, en lugar de
audio.onload = isAppLoaded;
tratar
audio.oncanplaythrough = isAppLoaded;
O mejor aún.. ;)
audio.addEventListener(''canplaythrough'', isAppLoaded, false);
//Tested on Chrome, FF, IE6
function LoadSound(filename) {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("load-sound").innerHTML = ''<embed src="'' + filename + ''" controller="1" autoplay="0" autostart="0" />'';
}
}
xmlhttp.open("GET", filename, true);
xmlhttp.send();
}
Referencia