Как транслировать усеченное аудио с помощью MediaSource API
С MediaSource API, вы можете генерировать и настраивать медиапотоки прямо в браузере. Это позволяет вам выполнять различные операции с мультимедийными данными удерживаемые медиа-тегами HTML, такими как или же . Например, вы можете смешивать разные потоки, создать перекрывающиеся медиа, ленивая загрузка медиа, а также редактировать медиа метрики например, изменить громкость или частоту.
В этом посте мы конкретно увидим, как потоковое аудио образец (усеченный файл MP3) с MediaSource API прямо в браузере, чтобы пред-шоу музыка для вашей аудитории. Мы расскажем, как определить поддержку API, как подключить HTML медиа элемент к API, как получить СМИ через Ajax и, наконец, как Поток это.
Если вы хотите заранее узнать, что мы делаем, взгляните на исходный код на Github, или проверить демонстрационная страница.
Шаг 1. Создайте HTML
Чтобы создать HTML, добавьте пометить с управления атрибут на вашу страницу. Для обратной совместимости также добавить сообщение об ошибке по умолчанию для пользователей, чьи браузеры не поддерживают эту функцию. Мы будем использовать JavaScript для включения / выключения этого сообщения.
Шаг 2. Определите поддержку браузера
В JavaScript создайте попробуй поймать блок, который будет выбросить ошибку если MediaSource API не поддерживается браузером пользователя или другими словами, если MediaSource (ключ) не существует в окно объект.
попытайтесь if (! 'MediaSource' в окне) бросить новый ReferenceError ('В объекте окна нет свойства MediaSource.') catch (e) console.log (e); Шаг 3. Обнаружение поддержки MIME
После проверки поддержки также проверьте поддержка типа MIME. Если MIME-тип мультимедиа, который вы хотите передать, не поддерживается браузером, предупредить пользователя а также выбросить ошибку.
var mime = 'audio / mpeg'; if (! MediaSource.isTypeSupported (mime)) alert ('Невозможно воспроизвести мультимедиа. Медиа типа MIME' + mime + 'не поддерживается.'); throw ('Тип носителя' + mime + 'не поддерживается.'); Обратите внимание, что приведенный выше фрагмент кода должен быть размещены внутри пытаться блок, перед ловить блок (для справки, следуйте нумерации строк или проверьте окончательный файл JS на Github).
Шаг 4. Связать
Создать новый MediaSource объект и назначить его в качестве источника тег используя URL.createObjectURL () метод.
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 () try switch (this.status) case 200: sourceBuffer.appendBuffer (this.response); break; case 404: throw 'File Not Found'; default: throw 'Не удалось получить file '; catch (e) console.error (e);; 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 () 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 'Не удалось получить файл'; catch (e) console.error (e);; 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 является все еще в экспериментальной стадии, доступ к более высоким функциям редактирования может быть ограничен, но основной поток особенность это то, что вы можете использовать сразу.
