HTML5 Audio es un tema de la especificación HTML5 , que incorpora entrada de audio, reproducción y síntesis , así como voz a texto , en el navegador.
El elemento [1] Se usa comúnmente para reproducir un solo archivo de audio dentro de una página web, mostrando un widget GUI con controles de reproducción / pausa / volumen.
El elemento
- atributos globales (clave de acceso; clase; contenteditable; contextmenu; dir; arrastrable; dropzone; hidden; id; lang; spellcheck; style; tabindex; title; translate)
- autoplay = "autoplay" o "" (cadena vacía) o vacío
Indica al agente de usuario que comience automáticamente la reproducción del flujo de audio tan pronto como pueda hacerlo sin detenerse. - preload = "none" o "metadata" o "auto" o "" (cadena vacía) o vacía
Representa una pista para el User-Agent sobre si la descarga optimista de la transmisión de audio en sí o sus metadatos se considera que vale la pena.- "none": le sugiere al User-Agent que no se espera que el usuario necesite la transmisión de audio, o que es deseable minimizar el tráfico innecesario.
- "metadatos": sugiere al usuario-agente que no se espera que el usuario necesite la transmisión de audio, pero que es deseable obtener sus metadatos (duración, etc.).
- "auto": le da pistas al agente de usuario de que se considera deseable descargar de manera optimista todo el flujo de audio.
- controles = "controles" o "" (cadena vacía) o vacío
Indica al agente de usuario que exponga una interfaz de usuario para controlar la reproducción del flujo de audio. - loop = "loop" o "" (cadena vacía) o vacía
Indica al agente de usuario que busque el inicio de la secuencia de audio al llegar al final. - mediagroup = string
Indica al agente de usuario que vincule varios videos y / o transmisiones de audio. - muted = "silenciado" o "" (cadena vacía) o vacío
Representa el estado predeterminado de la transmisión de audio, que posiblemente anula las preferencias del usuario. - src = [URL] no vacía potencialmente rodeada de espacios
La URL de la transmisión de audio.
Ejemplo: [2]
< controles de audio > < source src = "https://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4" type = "audio / mp4" /> < source src = "https: // media .w3.org / 2010/07 / bunny / 04-Death_Becomes_Fur.oga " type = " audio / ogg; codecs = vorbis " /> < p > Su agente de usuario no es compatible con el elemento de audio HTML5. p > audio >
Navegadores compatibles
En PC:
En dispositivos móviles:
- Navegador Android 2.3
- Navegador Blackberry
- Google Chrome
- Internet Explorer Mobile 9
- Safari 4 [3]
- Firefox
- Opera Mobile 11
Formatos de codificación de audio compatibles
La adopción de audio HTML5, como ocurre con el video HTML5 , se ha polarizado entre los defensores de los formatos libres y los de patente gravada . En 2007, la recomendación de usar Vorbis fue retirada de la especificación por el W3C junto con la de usar Ogg Theora , citando la falta de un formato aceptado por todos los principales proveedores de navegadores.
De Apple y Microsoft apoyan la norma ISO / IEC - define los formatos AAC y el mayor MP3 . Mozilla y Opera admiten el formato Vorbis libre , abierto y libre de regalías en los contenedores Ogg y WebM , y critican la naturaleza gravada por patentes de MP3 y AAC, que están garantizados como "no libres". Hasta ahora, Google ha proporcionado soporte para todos los formatos comunes.
La mayoría de los archivos AAC con longitud finita están empaquetados en un contenedor MPEG-4 (.mp4, .m4a), que se admite de forma nativa en Internet Explorer, Safari y Chrome, y es compatible con el sistema operativo en Firefox y Opera. [4] La mayoría de las transmisiones en vivo de AAC con longitud infinita están envueltas en un contenedor de transmisión de datos de audio (.aac, .adts), que es compatible con Chrome, Safari, Firefox y Edge. [5] [6] [7]
Muchos navegadores también admiten audio PCM sin comprimir en un contenedor WAV E. [8]
En 2012, el IETF lanzó y estandarizó el formato Opus, abierto y gratuito . Es compatible con Mozilla, Google, Opera y Edge. [9] [10] [11] [12]
Esta tabla documenta el soporte actual para formatos de codificación de audio por parte del elemento.
Formato | Envase | Tipo de Mimica | Cromo | explorador de Internet | Borde | Firefox | Ópera | Safari |
---|---|---|---|---|---|---|---|---|
PCM | WAV | audio / wav | sí | No | sí | Sí, en v3.5 | Sí, en v11.00 | Sí, en v3.1 |
MP3 | MP3 | audio / mpeg | Sí [13] | Sí, en IE9 | sí | Sí, en v71 [14] | Sí [13] | Sí, en v3.1 |
CAA | MP4 | audio / mp4 | sí | Sí, en IE9 | sí | Desde OS [a] | sí | sí |
ADTS [b] | audio / aac audio / aacp | sí | No | sí | Desde OS [a] en v45.0 | sí | sí | |
Vorbis | Ogg | audio / ogg | Sí, en v9 | No | En v79 [16] En v17, con Web Media Extensions [17] | Sí, en v3.5 | Sí, en v10.50 | Con componentes Xiph QuickTime ( macOS 10.11 y anteriores) |
WebM | audio / webm | sí | No | En v79 [16] En v17, con Web Media Extensions [17] | Sí, en v4.0 | Sí, en v10.60 | No | |
Opus | Ogg | audio / ogg | Sí, en v25 (en v31 para Windows) | No | En v79 [18] En v17, con Web Media Extensions [17] | Sí, en v15.0 | Sí, en v14 | No |
WebM | audio / webm | sí | No | En v79 [18] En v17, con Web Media Extensions [17] | Sí, en v28.0 [19] | sí | No | |
coste y flete | audio / x-caf | No | No | No | No | No | Sí, en Safari 11 y macOS High Sierra | |
FLAC | FLAC | audio / flac | Sí, en v56 [20] | No | Sí, en v16 [21] | Sí, en v51 [22] | sí | Sí, en v11 [23] |
Ogg | audio / ogg | Sí, en v56 [20] | No | En v79 [24] En v17, con Web Media Extensions [17] | Sí, en v51 [22] | sí | No |
API de audio web y API de procesamiento de MediaStream
La especificación Web Audio API desarrollada por W3C describe una API JavaScript de alto nivel para procesar y sintetizar audio en aplicaciones web. El paradigma principal es un gráfico de enrutamiento de audio, donde varios objetos AudioNode se conectan entre sí para definir la representación de audio general. El procesamiento real se llevará a cabo principalmente en la implementación subyacente (normalmente código Ensamblador / C / C ++ optimizado), pero también se admite el procesamiento y la síntesis directos de JavaScript. [25]
El navegador Firefox de Mozilla implementa una extensión de API de datos de audio similar desde la versión 4, implementada en 2010 [26] y lanzada en 2011, pero Mozilla advierte que no es estándar y está obsoleta, y recomienda la API de Web Audio en su lugar. [27] Algunas bibliotecas de síntesis y procesamiento de audio de JavaScript, como Audiolet, admiten ambas API.
El Grupo de trabajo de audio del W3C también está considerando la especificación de la API de procesamiento de MediaStream desarrollada por Mozilla . [28] Además de la mezcla y el procesamiento de audio, cubre la transmisión de medios más generales, incluida la sincronización con elementos HTML, la captura de transmisiones de audio y video y el enrutamiento entre pares de dichas transmisiones de medios. [29]
Navegadores compatibles
En PC:
- Google Chrome 10 [30] (habilitado de forma predeterminada desde 14 [31] )
- Firefox 23 (habilitado de forma predeterminada desde 25)
- Ópera 15
- Safari 6
- Microsoft Edge 12
En dispositivos móviles:
- Google Chrome para Android 28 (habilitado de forma predeterminada desde 29)
- Safari 6 (tiene restricciones de uso (silenciado a menos que el usuario llame))
- Firefox 23 (habilitado de forma predeterminada desde 25)
- Tizen
API de voz web
La API Web Speech tiene como objetivo proporcionar un método de entrada alternativo para aplicaciones web (sin usar un teclado). Con esta API, los desarrolladores pueden brindar a las aplicaciones web la capacidad de transcribir voz a texto, desde el micrófono de la computadora. El audio grabado se envía a los servidores de voz para su transcripción, después de lo cual se escribe el texto para el usuario. La API en sí es independiente de la implementación de reconocimiento de voz subyacente y puede admitir reconocedores integrados y basados en servidor. [32] El grupo HTML Speech Incubator ha propuesto la implementación de la tecnología de audio y voz en los navegadores en forma de API uniformes y multiplataforma. La API contiene ambos: [33]
- API de entrada de voz
- API de texto a voz
Google integró esta función en Google Chrome en marzo de 2011. [34] Permitiendo a sus usuarios buscar en la web con su voz con un código como:
< script type = "application / javascript" > función startSearch ( evento ) { evento . objetivo . forma . enviar (); } script > < form action = "http://www.google.com/search" > < input type = "search" name = "q" voz requerida onspeechchange = "startSearch" > form >
Navegadores compatibles
- Safari 6.1 y versiones posteriores [PARCIAL: solo síntesis de voz; sin reconocimiento]
- Google Chrome 25 y superior
- Firefox Desktop 44.0 y posteriores (Linux y Mac) / 45.0 y posteriores (Windows) [PARCIAL: solo síntesis de voz; sin reconocimiento; actualmente requiere que la opción "media.webspeech.recognition.enable" about: config se cambie manualmente a "true"] [35] [36] [37]
Ver también
- Video HTML5
- Uso de formatos Ogg en HTML5
Notas
- ^ a b No hay soporte nativo para el códec AAC debido a razones de licencia. La decodificación de archivos de audio requiere que el sistema operativo host proporcione una biblioteca compatible. [15]
- ^ Un archivo MPEG-4 contiene un encabezado que incluye metadatos seguidos de "pistas" que pueden incluir video y datos de audio, por ejemplo, video codificado H.264 y audio codificado AAC. ADTS, por el contrario, es un formato de transmisión que consta de una serie de cuadros, cada cuadro tiene un encabezado seguido de los datos AAC. [6]
Referencias
- ^ "Elemento de audio HTML5 - W3C" . Archivado desde el original el 6 de junio de 2013 . Consultado el 2 de julio de 2013 .
- ^ https://www.w3.org/wiki/HTML/Elements/audio
- ^ a b Acerca de audio y video HTML5 - Guía de audio y video HTML5 de Safari
- ^ ¿Es posible reproducir esta transmisión usando HTML5 / javascript?
- ^ Contenedor MP4 · Número 95 · karlheyes / icecast-kh · GitHub
- ^ a b https://developer.apple.com/library/ios/technotes/tn2236/_index.html#//apple_ref/doc/uid/DTS40008748-CH1-SECTION5
- ^ https://bugzilla.mozilla.org/show_bug.cgi?id=1224887
- ^ https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements
- ^ https://developer.mozilla.org/en-US/docs/Media_formats_supported_by_the_audio_and_video_elements#Ogg_Opus
- ^ https://www.xiph.org/press/2012/rfc-6716/
- ^ https://hacks.mozilla.org/2012/09/its-opus-it-rocks-and-now-its-an-audio-codec-standard/
- ^ "Soporte WebM, VP9 y Opus en Microsoft Edge - Blog de desarrollo de Microsoft Edge Blog de desarrollo de Microsoft Edge" . blogs.windows.com . Consultado el 22 de marzo de 2017 .
- ^ a b "Habilita la compatibilidad con mp3 en Chromium" . Google . Consultado el 1 de mayo de 2018 .
- ^ "Notas de la versión de Firefox 71.0" . Mozilla. 3 de diciembre de 2019.
- ^ "Guía de tipos y formatos de medios: contenido de imagen, audio y video" . Red de desarrolladores de Mozilla . Mozilla . Consultado el 6 de diciembre de 2019 .
- ^ a b https://developer.microsoft.com/en-us/microsoft-edge/status/vorbisaudiocodec/
- ^ a b c d e "Presentamos el paquete de extensión de medios web con soporte de OGG Vorbis y Theora para Microsoft Edge" . Blog de desarrollo de Microsoft Edge . Microsoft . 5 de diciembre de 2017.
- ^ a b https://developer.microsoft.com/en-us/microsoft-edge/status/opusaudioplayback/
- ^ https://www.mozilla.org/en-US/firefox/28.0/releasenotes/
- ^ a b "Soporte de códec FLAC para y WebAudio" . Estado de la plataforma Chrome . Consultado el 27 de diciembre de 2016 .
- ^ https://developer.microsoft.com/en-us/microsoft-edge/status/flacaudiocodec/
- ^ a b "Firefox 51 para desarrolladores" . Red de desarrolladores de Mozilla . Consultado el 27 de diciembre de 2016 .
- ^ Chaim Gartenberg (6 de junio de 2017). "Según los informes, Apple agrega soporte para audio sin pérdida FLAC en iOS 11" . The Verge .
- ^ https://developer.microsoft.com/en-us/microsoft-edge/status/oggcontainer/
- ^ Chris Rogers (15 de marzo de 2012). "API de audio web" . W3C . Archivado desde el original el 15 de marzo de 2012 . Consultado el 4 de julio de 2012 .
- ^ "API de datos de audio" .
- ^ "Presentamos la extensión Audio API" . Red de desarrolladores de Mozilla . Mozilla . 2012-03-05. Archivado desde el original el 16 de enero de 2014 . Consultado el 4 de julio de 2012 .
- ^ "API de procesamiento de audio" . W3C . 2011-12-15. Archivado desde el original el 15 de diciembre de 2011 . Consultado el 4 de julio de 2012 .
- ^ Robert O'Callahan (31 de mayo de 2012). "API de procesamiento de MediaStream" . W3C . Consultado el 4 de julio de 2012 .
- ^ Web Audio API ahora está disponible en Chrome
- ^ Scott Gilbertson (19 de septiembre de 2011). "Chrome 14 agrega mejor audio, soporte 'Native Client'" . Webmonkey . Cableado . Consultado el 4 de julio de 2012 .
- ^ "Borrador de API" . Consultado el 28 de enero de 2012 .
- ^ "API de voz HTML5" . Consultado el 28 de enero de 2012 .
- ^ "Hablar con tu computadora" . Consultado el 28 de enero de 2012 .
- ^ "Firefox 44 para desarrolladores - Mozilla | MDN" . Consultado el 9 de marzo de 2016 .
- ^ "Firefox - Notas (45.0) - Mozilla" . Consultado el 9 de marzo de 2016 .
- ^ "Web Speech API - Web APIs | MDN" . Consultado el 9 de marzo de 2016 .
Enlaces externos
- HTML / Elementos / audio - W3C Wiki
- Elemento de audio HTML5 - W3C
- API de audio web - W3C
- API de procesamiento de MediaStream - W3C
- API de voz web - W3C
- DAW de audio web - Github
- API de audio web de Mozilla