Как транслировать усеченное аудио с помощью MediaSource API

С MediaSource APIВы можете создавать и настраивать медиапотоки прямо в браузере. Он позволяет выполнять различные операции с мультимедийными данными, хранящимися в тегах HTML, связанных с мультимедиа, таких как

В этом посте мы конкретно увидим, как передавать аудиосэмпл (усеченный файл MP3) с помощью MediaSource API прямо в браузере, чтобы предварительно показать музыку своей аудитории. Мы расскажем, как определить поддержку API, как подключить медиа-элемент HTML к API, как извлечь медиа-данные через Ajax и, наконец, как их транслировать.

Читайте также: Как отображать синхронизированную транскрипцию вместе с воспроизводимым аудио

Если вы хотите узнать заранее, чем мы занимаемся, взгляните на исходный код на Githubили проверить демонстрационная страница,
Шаг 1 — Создайте HTML
Чтобы создать HTML, добавьте тег с атрибутом управления на вашей странице. Для обратной совместимости также добавьте сообщение об ошибке по умолчанию для пользователей, чьи браузеры не поддерживают эту функцию. Мы будем использовать JavaScript для включения / выключения этого сообщения.

Ваш браузер не поддерживает аудио элемент HTML.

Шаг 2 — Определить поддержку браузера
В JavaScript создайте попробуй… поймать блок это вызовет ошибку, если MediaSource API не поддерживается браузером пользователя, или, другими словами, если MediaSource (ключ) не существует в объекте окна.

пытаться {
  if (! ‘MediaSource’ в окне)
    бросить новый ReferenceError (‘Нет свойства MediaSource
          в окне объекта. ‘)
  } catch (e) {
    console.log (е);
}

Шаг 3 — Обнаружение поддержки MIME
После проверки поддержки, также проверьте поддержку MIME тип, Если MIME-тип мультимедиа, который вы хотите передать, не поддерживается браузером, предупредите пользователя и выдайте ошибку.
var mime = ‘audio / mpeg’;
if (! MediaSource.isTypeSupported (mime)) {
  alert («Невозможно воспроизвести носитель. Носитель MIME-типа» +
        mime + ‘не поддерживается.’);
  throw (‘Тип медиа’ + mime +
        ‘ не поддерживается.’);
}

Обратите внимание, что приведенный выше фрагмент кода должен быть размещен внутри блока try, перед блоком catch (для справки, следуйте нумерации строк или проверьте окончательный файл JS на Github).
Шаг 4 — Связать

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

Шаг 5 — Добавьте объект SourceBuffer в MediaSource
Когда медиа-элемент HTML получает доступ к источнику мультимедиа и готов создать объекты SourceBuffer, MediaSource API запускает событие sourceopen.

SourceBuffer Объект содержит кусок медиа, который в конечном итоге декодируется, обрабатывается и воспроизводится. Один объект MediaSource может иметь несколько объектов SourceBuffer.

Внутри обработчика события sourceopen добавьте объект SourceBuffer в MediaSource с помощью addSourceBuffer () метод.

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

Шаг 6 — Получить СМИ
Теперь, когда у вас есть объект SourceBuffer, пришло время извлечь файл MP3. В нашем примере мы сделаем это с помощью AJAX-запроса.

Использовать arraybuffer как responseType, который обозначает двоичные данные. После успешного получения ответа добавьте его в SourceBuffer с помощью 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 () {
      пытаться {
          switch (this.status) {
              дело 200:
                sourceBuffer.appendBuffer (this.response);
                перемена;
              дело 404:
                бросить «Файл не найден»;
              дефолт:
                throw ‘Не удалось получить файл’;
         }
      } catch (e) {
        console.error (е);
      }
    };
    xhr.send ();
});

Шаг 7 — Укажите конец потока
Когда API завершил добавление данных в SourceBuffer, вызывается событие с именем updatend. Внутри обработчика событий, вызовите конец потока() метод MediaSource, чтобы указать, что поток закончился.

mediaSource.addEventListener (‘sourceopen’, function () {
  var sourceBuffer = this.addSourceBuffer (mime);
  var xhr = new XMLHttpRequest;
  xhr.open (‘GET’, ‘sample.mp3’);
  xhr.responseType = ‘arraybuffer’;
  xhr.onload = function () {
    пытаться {
      switch (this.status) {
        дело 200:
            sourceBuffer.appendBuffer (this.response);
            sourceBuffer.addEventListener (‘updateend’, function (_) {
                mediaSource.endOfStream ();
            });
            перемена;
        дело 404:
            бросить «Файл не найден»;
        дефолт:
            throw ‘Не удалось получить файл’;
      }
    } catch (e) {
      console.error (е);
    }
  };
  xhr.send ();
});

Шаг 8 — Усечение мультимедийного файла
Объект SourceBuffer имеет два свойства, называемых appendWindowStart а также appendWindowEnd представляющие время начала и окончания медиаданных, которые вы хотите отфильтровать. Выделенный код ниже фильтрует первые четыре секунды MP3.

mediaSource.addEventListener (‘sourceopen’, function () {
  var sourceBuffer = this.addSourceBuffer (mime);
  sourceBuffer.appendWindowEnd = 4.0;
  …
});

демонстрация
И это все, наш аудио образец транслируется прямо с веб-страницы. Для исходного кода, посмотрите на наш Github репо и для окончательного результата, проверьте демонстрационная страница,
Поддержка браузера
На момент написания этого поста MediaSource API официально поддерживается во всех основных браузерах. Но тестирование показывает, что в Firefox реализация содержит ошибки, и браузеры Webkit по-прежнему испытывают проблемы со свойством appendWindowStart.

Поскольку MediaSource API все еще находится на экспериментальной стадии, доступ к более высоким функциям редактирования может быть ограничен, но базовая функция потоковой передачи — это то, что вы можете использовать сразу же.