Esta división ha sido evaluado por nuestros expertos para garantizar la exactitud de nuestra esta reseña.
Solución:
¿Qué enfoque?
Puede reproducir audio con etiquetar o o . Lazy loading (carga cuando lo necesites) el sonido es el mejor enfoque si su tamaño es pequeño. Puede crear el elemento de audio dinámicamente, cuando esté cargado puede iniciarlo con .play() y pausalo con .pause().
cosas que usamos
Usaremos canplay event para detectar que nuestro archivo está listo para ser reproducido.
No hay .stop() Función para elementos de audio. Solo podemos pausarlos. Y cuando queremos empezar desde el principio del archivo de audio cambiamos su .currentTime. Usaremos esta línea en nuestro ejemplo. audioElement.currentTime = 0;. Conseguir .stop() función, primero pausamos el archivo y luego reiniciamos su tiempo.
Es posible que queramos saber la duración del archivo de audio y el tiempo de reproducción actual. ya aprendimos .currentTimearriba, para conocer su longitud usamos .duration.
Guía de ejemplo
- Cuando el documento está listo creamos un elemento de audio dinámicamente
- Configuramos su fuente con el audio que queremos reproducir.
- Usamos el evento ‘terminado’ para iniciar el archivo nuevamente.
Cuando el tiempo actual sea igual a su duración, el archivo de audio dejará de reproducirse. siempre que uses
play()comenzará desde el principio.
- Nosotros usamos
timeupdateevento para actualizar la hora actual cada vez que el audio.currentTimecambios. - Nosotros usamos
canplayevento para actualizar la información cuando el archivo esté listo para ser reproducido. - Creamos botones para reproducir, pausar, reiniciar.
$(document).ready(function()
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'http://www.soundjay.com/misc/sounds/bell-ringing-01.mp3');
audioElement.addEventListener('ended', function()
this.play();
, false);
audioElement.addEventListener("canplay",function()
$("#length").text("Duration:" + audioElement.duration + " seconds");
$("#source").text("Source:" + audioElement.src);
$("#status").text("Status: Ready to play").css("color","green");
);
audioElement.addEventListener("timeupdate",function()
$("#currentTime").text("Current second:" + audioElement.currentTime);
);
$('#play').click(function()
audioElement.play();
$("#status").text("Status: Playing");
);
$('#pause').click(function()
audioElement.pause();
$("#status").text("Status: Paused");
);
$('#restart').click(function()
audioElement.currentTime = 0;
);
);
Sound Information
Duration:
Source:
Status: Loading
Control Buttons
Playing Information
0
$("#myAudioElement")[0].play();
no funciona con $("#myAudioElement").play() como esperarías. La razón oficial es que incorporarlo en jQuery agregaría un play() método a cada elemento, lo que causaría una sobrecarga innecesaria. Entonces, en su lugar, debe referirse a él por su posición en el array de elementos DOM con los que está recuperando $("#myAudioElement")también conocido como 0.
Esta cita es de un error que se envió al respecto, que se cerró como “feature/wontfix”:
Para hacer eso, necesitaríamos agregar un nombre de método jQuery para cada nombre de método de elemento DOM. Y, por supuesto, ese método no haría nada para los elementos que no son de medios, por lo que no parece que valga la pena los bytes adicionales que tomaría.
Para cualquier otra persona que me siga, simplemente tomé la respuesta de Ahmet y actualicé el jsfiddle del autor de la pregunta original aquí, sustituyendo:
audio.mp3
por
http://www.uscis.gov/files/nativedocuments/Track%2093.mp3
enlazando en un mp3 disponible gratuitamente fuera de la web. ¡Gracias por compartir la solución fácil!
Tienes la opción de añadir valor a nuestro contenido informacional asistiendo con tu veteranía en las aclaraciones.