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 .

20 Iconsets gratuitos y multiusos que deberías marcar

20 Iconsets gratuitos y multiusos que deberías marcar

¿Buscas los íconos correctos para tu aplicación? ¿Qué tal algunos iconos de vectores? En este post, hemos reunido 20 conjuntos de iconos de usos múltiples que puede personalizar a su antojo, y luego descargarlos y usarlos para su próximo proyecto.Lo mejor de todo, puedes usarlos todos gratis. Sin embargo, deberá ir a cada una de las diferentes fuentes para descargar los archivos del conjunto de iconos. Con to

(Consejos de tecnología y diseño)

Cómo recuperar su URL de imagen de Gravatar

Cómo recuperar su URL de imagen de Gravatar

Tener una foto de perfil también conocida como "imagen de avatar" es bastante esencial en línea. Cargamos nuestra mejor foto de perfil en sitios web y sitios sociales en busca de legitimidad, credibilidad y para que las personas reconozcan mejor nuestra presencia en línea.WordPress tiene su propio servicio para entregar imágenes de perfil de usuario, y se llama Gravatar. Ta

(Consejos de tecnología y diseño)