Как транслировать усеченное аудио с помощью MediaSource API
С MediaSource APIВы можете создавать и настраивать медиапотоки прямо в браузере. Он позволяет выполнять различные операции с мультимедийными данными, хранящимися в тегах HTML, связанных с мультимедиа, таких как
В этом посте мы конкретно увидим, как передавать аудиосэмпл (усеченный файл MP3) с помощью MediaSource API прямо в браузере, чтобы предварительно показать музыку своей аудитории. Мы расскажем, как определить поддержку API, как подключить медиа-элемент HTML к API, как извлечь медиа-данные через Ajax и, наконец, как их транслировать.
Читайте также: Как отображать синхронизированную транскрипцию вместе с воспроизводимым аудио
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Если вы хотите узнать заранее, чем мы занимаемся, взгляните на исходный код на 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 все еще находится на экспериментальной стадии, доступ к более высоким функциям редактирования может быть ограничен, но базовая функция потоковой передачи — это то, что вы можете использовать сразу же.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)