Cómo agregar elementos de audio a una página de html 5
Tal vez ninguna característica de HTML5 fue más anticipado que los elementos de los medios de comunicación, y por fin, puede crear páginas web HTML 5 que cuentan con elementos de audio sin necesidad de un plugin externo.
Video: Insertar audio en HTML5
los etiqueta permite incrustar un archivo de audio directamente en el navegador, utilizando un código como el siguiente:
Si el navegador que está utilizando no admite la etiqueta, el código entre y será presentado en su lugar, por lo que puede proporcionar un enlace ordinaria para permitir al usuario descargar el audio. O bien, puede incrustar un reproductor de Flash para navegadores antiguos.
los la etiqueta es compatible con varios atributos estándar:
auto reproducción: El archivo de audio se reproduce inmediatamente cuando el navegador carga la página. Sin embargo, se considera grosero para reproducir el audio sin el permiso explícito del usuario.
controles: El navegador presenta una interfaz de control simple incluyendo reproducir / pausa, control de volumen, y una especie de indicador de posición. Es bueno para dar al usuario algún tipo de control, ya sea a través del mecanismo de control integrado o código javascript.
precarga: El archivo de audio empieza a cargarse en la memoria tan pronto como se carga la página, pero no juega hasta que el usuario activa el reproductor. Esto puede evitar que el búfer que podría ocurrir si el audio no está precargado.
src: Indica la dirección del archivo. Tenga en cuenta que la se prefiere la etiqueta, ya que permite múltiples opciones.
los etiqueta se apoya de alguna manera por todos los principales navegadores, incluido Internet Explorer 9 (IE9). Sin embargo, los formatos de archivo de audio reales que no están establecidas en la norma, por lo que los diferentes navegadores (naturalmente) soportan diferentes formatos. La mayoría de los navegadores soportan el estándar de código abierto Ogg, pero algunos (en particular, Safari e IE9) prefieren Mp3. Si proporciona una versión de cada uno, es probable que cualquier navegador de último modelo apoyará su audio. Utilizar el etiqueta para incluir múltiples fuentes de audio:
El navegador intentará cada fuente en orden hasta que encuentra uno que puede utilizar.
Video: Curso de HTML5 - 05 - Como Insertar Imagenes - Audio - Video
Tenga en cuenta que la audio elemento puede ser controlado a través de código javascript. El siguiente código (invocada en body.onload) Añade un elemento canción a la página sin mostrar el elemento de audio:
var canción-función init () {canción = document.createElement ( `audio`) - song.setAttribute ( `src`, `DoYou.ogg`) - init} // fin
El código crea un elemento llamado canción y precargas presenten una Ogg en esa canción. El código HTML siguiente crea un botón de reproducción:
Por supuesto, este botón puede ser de estilo en la forma que desee para crear su propia interfaz. Una vez que tenga un elemento de audio identificado en su página, se pueden aplicar las siguientes funciones javascript para ello:
jugar: Como se puede adivinar, este reproduce el archivo. Sorprendentemente, no hay una orden de parada. Ya sea que usted necesita para hacer una pausa o ajustar el volumen a cero.
pausa: Esto detiene el sonido. El siguiente comando de reproducción comienza en este punto.
setAttribute: Esta función le permite modificar cualquiera de los atributos que normalmente establecidos en el código HTML etiqueta. Esto se utiliza principalmente para adjuntar una src al elemento de audio.
También puede acceder a una serie de propiedades útiles:
hora actual: Esto indica dónde (en segundos) que la canción se está reproduciendo actualmente. Puede leerla para saber la posición actual, o se establece en cue a una parte particular de su canción.
Video: Como poner sonido a botones sin flasH HTML5
volumen: El volumen va de 0 (silencio) a 100 (máximo). Puede establecer o recuperar este atributo a través de código javascript.
