es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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 .

Paso 1. Crea el HTML

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 .

Iconos Standart - Iconset de Vector libre en formatos de fuente SVG, Sketch & Icon

Iconos Standart - Iconset de Vector libre en formatos de fuente SVG, Sketch & Icon

No es difícil encontrar conjuntos de iconos gratuitos en la web. Sin embargo, es difícil encontrar conjuntos de iconos que se actualicen constantemente .Los iconos Standart son un conjunto de iconos de estilo de línea totalmente nuevo, creado por el diseñador Yaroslav Samoilov.El sitio web selecciona todos los iconos en un solo lugar y ayuda a construir una marca alrededor de este conjunto. Pe

(Consejos de tecnología y diseño)

Cómo crear una interfaz de usuario de interruptor con CSS Mask

Cómo crear una interfaz de usuario de interruptor con CSS Mask

En el procesamiento de imágenes, el enmascaramiento es una técnica que le permite ocultar una imagen con otra. Una máscara se utiliza para hacer que una parte de una imagen sea transparente . Puede realizar el enmascaramiento usando CSS con la ayuda de propiedades de enmascaramiento.En la publicación de hoy crearemos una imagen enmascarada utilizando dos imágenes PNG y técnicas de enmascaramiento de CSS, y les permitiremos a los usuarios manejar los dos estados de la imagen ( día y noche ) con la ayuda de una interfaz de usuario de interruptor.Debido

(Consejos de tecnología y diseño)