Cómo transmitir audio truncado usando la API de MediaSource

Con el API de fuente de mediospuede generar y configurar flujos de medios directamente en el navegador. Te permite realizar una variedad de operaciones en datos de medios en manos de etiquetas HTML relacionadas con los medios, como <audio> o <video>. Por ejemplo, puedes mezclar diferentes flujos, crear medios superpuestos, medios de carga lentay editar métricas de medios como cambiar el volumen o la frecuencia.

En esta publicación, veremos específicamente cómo transmitir una muestra de audio (un archivo MP3 truncado) con el API de fuente de medios directamente en el navegador para música previa al espectáculo a tu audiencia. Cubriremos cómo detectar soporte para la APIcómo conectar el elemento multimedia HTML a la API, cómo traer los medios a través de Ajax, y finalmente cómo transmítelo.

Si quieres ver de antemano lo que estamos haciendo, echa un vistazo a la código fuente en Githubo echa un vistazo a la página de demostración.

Paso 1: crea el HTML

Para crear el HTML, agregue un <audio> etiqueta con un controls atributo a tu pagina Para 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.

<audio controls>
Your browser doesn't support HTML audio element.
</audio>

Paso 2: detecta la compatibilidad del navegador

En JavaScript, cree un try…catch bloque que lo hará lanzar un error Si el La API de MediaSource no es compatible por el navegador del usuario, o, dicho de otro modo, si MediaSource (la clave) no existe en el window objeto.

try {
  if (!'MediaSource' in window)
    throw new ReferenceError('There is no MediaSource property
          in window object.')
  } catch (e) {
    console.log(e);
}

Paso 3: detecta la compatibilidad con MIME

Después de la verificación de soporte, verifique también el soporte del tipo MIME. Si el tipo MIME de los medios que desea transmitir no es compatible con el navegador, alertar al usuario y lanzar un error.

var mime="audio/mpeg";
if (!MediaSource.isTypeSupported(mime)) {
  alert('Can not play the media. Media of MIME type ' +
        mime + ' is not supported.');
  throw ('Media of type ' + mime +
        ' is not supported.');
}

Tenga en cuenta que el fragmento de código anterior debe ser colocado dentro de la try bloquearantes de catch bloque (como referencia, siga la numeración de líneas o consulte el archivo JS final en Github).

Paso 4 – Vincular el <audio> etiqueta a la API de MediaSource

Crear un nuevo MediaSource objeto, y asignarlo como la fuente de la <audio> etiqueta usando el URL.createObjectURL() método.

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

Paso 5: agregue un SourceBuffer oponerse a MediaSource

Cuando un elemento multimedia HTML accede a una fuente de medios y está listo para crear SourceBuffer objetosla API de MediaSource dispara un sourceopen evento .

El SourceBuffer objeto contiene una parte de los medios que finalmente se decodifica, procesa y reproduce. un solo MediaSource objeto puede tener múltiples SourceBuffer objetos.

Dentro de controlador de eventos del sourceopen eventoAgrega un SourceBuffer oponerse a MediaSource con el addSourceBuffer() método.

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

Paso 6: Obtener los medios

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

Usar arraybuffer como responseTypecual denota datos binarios. Cuando la respuesta se obtiene con éxito, añádelo a SourceBuffer 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';
              default:
                throw 'Failed to fetch the file';
         }
      } catch (e) {
        console.error(e);
      }
    };
    xhr.send();
});

Paso 7: indica el final de la transmisión

Cuando la API haya terminado de agregar los datos a SourceBuffer un evento llamado updatend Está despedido. Dentro de un controlador de eventos, llama al endOfStream() método de MediaSource a indicar que la transmisión ha terminado.

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;
        case 404:
            throw 'File Not Found';
        default:
            throw 'Failed to fetch the file';
      }
    } catch (e) {
      console.error(e);
    }
  };
  xhr.send();
});

Paso 8: trunca el archivo multimedia

El SourceBuffer el objeto tiene dos propiedades llamado appendWindowStart y appendWindowEnd representando a la 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 se transmite una muestra de audio directamente desde la página web. Para el código fuenteecha un vistazo a nuestro repositorio de Github y para el resultado final, echa un vistazo a la página de demostración.

Compatibilidad con navegador

Al momento de escribir este post, el MediaSource La API es oficialmente compatible con todos los principales navegadores. Pero las pruebas muestran que el la implementación tiene errores en Firefoxy los navegadores Webkit todavía tienen problemas con el appendWindowStart propiedad.

Como la API de MediaSource es aún en su etapa experimentalel acceso a funciones de edición superiores puede estar limitado, pero el transmisión básica característica es algo que puede hacer uso de inmediato.