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 HTMLPara 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
¿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
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