Cómo transmitir audio truncado usando la API MediaSource
Con el API MediaSource, usted puede generar y configurar flujos de medios Justo en el navegador. Te permite realizar una variedad de operaciones en datos de medios sostenidas por etiquetas HTML relacionadas con los medios como o . Por ejemplo, usted puede mezclar diferentes corrientes, crear medios superpuestos, carga perezosa de medios, y editar métricas de medios como cambiar el volumen o la frecuencia.
En este post, veremos específicamente cómo transmitir una muestra de audio (un archivo MP3 truncado) con el API MediaSource justo en el navegador para música pre-show a su audiencia Vamos a cubrir cómo detectar soporte para la API, cómo conectar el elemento de medios HTML a la API, cómo buscar los medios via Ajax, y finalmente como transmitirlo.
Si desea ver por adelantado lo que estamos haciendo, eche un vistazo a la código fuente en Github, o echa un vistazo a la página de demostración.
Paso 1. Crea el HTML
Para crear el HTML, agregue un etiqueta con un controles atributo a tu pagina Por compatibilidad con versiones anteriores, también agregar un mensaje de error predeterminado para usuarios cuyos navegadores no admiten la función. Usaremos JavaScript para activar / desactivar este mensaje..
Paso 2. Detectar el soporte del navegador.
En JavaScript, cree un trata de atraparlo bloque que va lanzar un error Si el API de MediaSource no es compatible por el navegador del usuario, o, con otras palabras si MediaSource (la clave) no existe en el ventana objeto.
intente si (! 'MediaSource' en la ventana) lance un nuevo ReferenceError ('No hay propiedad de MediaSource en la ventana objeto.') catch (e) console.log (e); Paso 3. Detectar soporte MIME
Después de la verificación de soporte, también compruebe la Soporte del tipo MIME.. Si el navegador no admite el tipo MIME de los medios que desea transmitir., alertar al usuario y lanzar un error.
var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) alert ('No se pueden reproducir los medios. Los medios de tipo MIME' + mime + 'no son compatibles.'); throw ('Medio de tipo' + mime + 'no es compatible.'); Tenga en cuenta que el fragmento de código anterior debe ser colocado dentro de la tratar bloquear, antes de captura bloque (para referencia, siga la numeración de las líneas o revise el archivo JS final en Github).
Paso 4. Vincular el
Crear un nuevo MediaSource objeto, y asignarlo como la fuente de la etiqueta usando el URL.createObjectURL () método.
var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); Paso 5. Agrega un FuenteBuffer oponerse a MediaSource
Cuando un elemento multimedia HTML accede a una fuente de medios y esta listo para crear FuenteBuffer objetos, la API de MediaSource dispara un fuente abierta evento .
los FuenteBuffer objeto tiene una porción de medios Eso es finalmente decodificado, procesado y jugado. Una sola MediaSource objeto puede tener múltiples FuenteBuffer objetos.
Dentro de manejador de eventos de la fuente abierta evento, Agrega un FuenteBuffer oponerse a MediaSource con el addSourceBuffer () método.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime);); Paso 6. Busca los medios.
Ahora que tienes un FuenteBuffer objeto, es hora de buscar el archivo MP3. En nuestro ejemplo, lo haremos por utilizando una solicitud AJAX.
Utilizar arraybuffer como tipo de respuesta, cual denota datos binarios. Cuando la respuesta se obtiene con éxito, añadirlo a FuenteBuffer con el appendBuffer () método.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = new XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); break; case 404: throw 'File Not Found'; por defecto: throw 'Failed to get the the archivo '; catch (e) console.error (e);; xhr.send ();); Paso 7. Indica el final de la corriente.
Cuando la API haya terminado de añadir los datos a FuenteBuffer un evento llamado actualización Está despedido. Dentro de un controlador de eventos, llame al fin de la transmisión() método de MediaSource a indicar que la transmisión ha finalizado.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); var xhr = new XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', function (_) mediaSource.endOfStream (); ); break; caso 404: lanzar 'Archivo no encontrado'; predeterminado: lanzar 'Error al recuperar el archivo'; catch (e) console.error (e);; xhr.send ();) ; Paso 8. Trunca el archivo multimedia
los FuenteBuffer objeto tiene dos propiedades llamado appendWindowStart y appendWindowEnd representando el Hora de inicio y finalización de los datos multimedia. quieres filtrar El código resaltado a continuación Filtra los primeros cuatro segundos. del MP3.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0;…); Manifestación
Y eso es todo, nuestro muestra de audio se transmite directamente desde la página web. Para el código fuente, Echa un vistazo a nuestro Repositorio de github y para el resultado final, echa un vistazo a la página de demostración.
Soporte del navegador
A partir de la redacción de este post, el MediaSource API es oficialmente compatible en todos los principales navegadores. Pero la prueba muestra que la La implementación está defectuosa en Firefox, y los navegadores Webkit todavía tienen problemas con el appendWindowStart propiedad.
Como la API MediaSource es aún en su etapa experimental, el acceso a funciones de edición superiores puede ser limitado, pero la transmisión básica característica es algo que puedes hacer uso de inmediato.
