Cómo transmitir audio truncado utilizando MediaSource API

Con MediaSource API, puede generar y configurar flujos de medios directamente en el navegador. Le permite realizar una variedad de operaciones en datos multimedia contenidos en etiquetas HTML relacionadas con medios tales como

En esta publicación, veremos específicamente cómo transmitir una muestra de audio (un archivo MP3 truncado) con la API de MediaSource directamente en el navegador para mostrar música a su audiencia previamente . Cubriremos cómo detectar soporte para la API, cómo conectar el elemento de medios HTML a la API, cómo recuperar los medios a través de Ajax y finalmente cómo transmitirlos .

Si desea ver de antemano lo que estamos haciendo, eche un vistazo al código fuente en Github o consulte la página de demostración .

Para crear el HTML, agregue un

Paso 2. Detectar el soporte del navegador

En JavaScript, cree un bloque try…catch que lanzará un error si la API de MediaSource no es compatible con el navegador del usuario o, en otras palabras, si MediaSource (la clave) no existe en el objeto de la window .

 try {if (! 'MediaSource' en la ventana) lanza un nuevo ReferenceError ('No hay propiedad de MediaSource en el objeto de la ventana.')} catch (e) {console.log (e); } 

Paso 3. Detecta el soporte MIME

Después de la comprobación de compatibilidad, también verifique si es compatible con el tipo MIME . Si el navegador no admite el tipo MIME del medio que desea transmitir, avise al usuario y genere un error .

 var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) {alert ('No se puede reproducir el medio. Los medios de tipo MIME' + mime + 'no son compatibles.'); throw ('Media de tipo' + mime + 'no es compatible.'); } 

Tenga en cuenta que el fragmento de código anterior debe colocarse dentro del bloque try, antes del bloque catch (para referencia, siga la numeración de la línea o revise el archivo JS final en Github).

Paso 4. Vincula el

Cree un nuevo objeto MediaSource y asígnelo como fuente de

 var audio = document.querySelector ('audio'), mediaSource = new MediaSource (); audio.src = URL.createObjectURL (mediaSource); 

Paso 5. Agregue un objeto SourceBuffer a MediaSource

Cuando un elemento multimedia HTML accede a un origen multimedia y está listo para crear objetos SourceBuffer, la API MediaSource sourceopen un evento sourceopen .

El objeto SourceBuffer contiene un fragmento de medio que finalmente se decodifica, procesa y reproduce. Un único objeto MediaSource puede tener múltiples objetos SourceBuffer .

Dentro del controlador de sourceopen evento sourceopen, agregue un objeto SourceBuffer a MediaSource con el método addSourceBuffer() .

 mediaSource.addEventListener ('sourceopen', function () {var sourceBuffer = this.addSourceBuffer (mime);}); 

Paso 6. Obtener los medios

Ahora que tiene un objeto SourceBuffer, es hora de buscar el archivo MP3 . En nuestro ejemplo, lo haremos utilizando una solicitud AJAX .

Utilice arraybuffer como responseType, que denota datos binarios . Cuando la respuesta se SourceBuffer con éxito, SourceBuffer a SourceBuffer con el método appendBuffer() .

 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; caso 404: throw 'File Not Found'; predeterminado: throw 'Error al recuperar el file ';}} catch (e) {console.error (e);}}; xhr.send ();}); 

Paso 7. Indica el final de la secuencia

Cuando la API ha terminado de SourceBuffer los datos a SourceBuffer un evento llamado updatend . Dentro de un controlador de eventos, llame al método endOfStream() de MediaSource para 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: throw 'Archivo no encontrado'; predeterminado: throw 'Error al buscar el archivo';}} catch (e) {console.error (e);}}; xhr.send ();}) ; 

Paso 8. Truncar el archivo multimedia

El objeto SourceBuffer tiene dos propiedades llamadas appendWindowStart y appendWindowEnd representan la hora de inicio y finalización de los datos multimedia que desea 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, nuestra muestra de audio se transmite directamente desde la página web. Para el código fuente, eche un vistazo a nuestro repositorio de Github y, para obtener el resultado final, consulte la página de demostración .

Soporte del navegador

Al escribir esta publicación, la API de MediaSource es oficialmente compatible con todos los principales navegadores. Pero las pruebas muestran que la implementación tiene errores en Firefox, y los navegadores Webkit todavía tienen problemas con la propiedad appendWindowStart .

Como MediaSource API aún se encuentra en su etapa experimental, el acceso a las funciones de edición superiores puede ser limitado, pero la función de transmisión básica es algo que puede usar de inmediato .

Productos USB raros e inusuales

Ese puerto USB en su PC no es solo para conectar unidades flash USB o cables de datos USB. También puede alimentar algunos mini gadgets. Desde calentadores de tazas y mini máquinas de coser hasta mini lavadoras, puedes obtener todo tipo de interesantes gadgets alimentados por USB .En esta publicación, te traigo 15 de los gadgets más inusuales que funcionan con USB . Pa

(Consejos de tecnología y diseño)

Cuatro técnicas de diseño UX para alentar la participación del usuario

Animar a los usuarios a permanecer y usar un sitio web no siempre implica un código más delgado o gráficos más bonitos. Algunos de los diseños más simples como Reddit aún mantienen a los usuarios absortos con el contenido, y encantados de interactuar con el sitio.El secreto reside en la experiencia del usuario y la consideración de cómo funciona un sitio web . Las int

(Consejos de tecnología y diseño)