Як потокове обрізання аудіо з використанням MediaSource API
З API MediaSource, ти можеш генерувати та конфігурувати мультимедійні потоки у браузері. Це дозволяє виконувати різноманітні операції з медіаданими проведених медіа-пов'язаними тегами HTML, такими як або . Наприклад, ви можете змішуйте різні потоки, створювати перекриваються носії, ледачі завантажувальні носії, і редагувати медіа-медіа наприклад, змінювати гучність або частоту.
У цій публікації ми спеціально побачимо, як це зробити потік аудіо-зразка (урізаний файл MP3) з API MediaSource праворуч у браузері музику перед показом Вашій аудиторії. Ми розглянемо, як це зробити виявляє підтримку API, як підключити медіа-елемент HTML API, як це зробити вибирати ЗМІ через Ajax, і, нарешті, як потік.
Якщо ви хочете побачити заздалегідь, що ми маємо на увазі, подивіться на вихідний код на Github, або перевірте Демонстраційна сторінка.
Крок 1. Створіть HTML
Щоб створити HTML, додайте з тегом управління атрибут на вашу сторінку. Для зворотної сумісності також додати повідомлення про помилку за замовчуванням для користувачів, чиї браузери не підтримують цю функцію. Ми будемо використовувати JavaScript, щоб увімкнути / вимкнути це повідомлення.
Крок 2. Виявлення підтримки браузера
У JavaScript створіть a спробуйте… ловити блок, який буде кинути помилку якщо API MediaSource не підтримується веб-переглядачем користувача або іншими словами, якщо MediaSource (ключ) не існує в вікна об'єкт.
try if (! 'MediaSource' у вікні) кидайте новий ReferenceError ('Немає властивості MediaSource у об'єкті window.') catch (e) console.log (e); Крок 3. Виявлення підтримки MIME
Після перевірки підтримки також перевірте наявність підтримка типу MIME. Якщо тип MIME носія, який потрібно передати, не підтримується браузером, сповістити користувача і кинути помилку.
var mime = 'аудіо / mpeg'; if (! MediaSource.isTypeSupported (mime)) alert ("Неможливо відтворити носій. Медіа типу MIME" + mime + "не підтримується. '); throw ('носій типу' + mime + 'не підтримується.'); Зауважте, що фрагмент коду вище має бути розміщені всередині спробуйте блок, перед улов блок (для довідки, слідуйте за нумерацією рядків або перевірте остаточний файл JS у Github).
Крок 4. Посилання
Створіть нове MediaSource об'єкт, і призначити його як джерело тег за допомогою URL.createObjectURL () метод.
var audio = document.querySelector ('аудіо'), mediaSource = новий MediaSource (); audio.src = URL.createObjectURL (mediaSource); Крок 5. Додати a SourceBuffer об'єкт MediaSource
Коли HTML медіа-елемент доступ до джерела медіа і готовий створити SourceBuffer об'єктів, API MediaSource пожежі a джерело події .
The SourceBuffer об'єкт тримає шматок медіа що в кінцевому підсумку декодується, обробляється і відтворюється. Самотній MediaSource об'єкт може мають кілька SourceBuffer об'єктів.
Всередині обробник подій джерело події, додайте a SourceBuffer об'єкт MediaSource з addSourceBuffer () метод.
mediaSource.addEventListener ('sourceopen', function () var sourceBuffer = this.addSourceBuffer (mime);); Крок 6. Отримати носій
Тепер у вас є SourceBuffer об'єкт, пора отримати файл MP3. У нашому прикладі ми це зробимо використовуючи запит AJAX.
Використовуйте масив як responseType, котрий позначає двійкові дані. Коли відповідь успішно отримано, додайте його SourceBuffer з appendBuffer () метод.
mediaSource.addEventListener ("sourceopen", функція () var sourceBuffer = this.addSourceBuffer (mime); var xhr = new XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) випадок 200: sourceBuffer.appendBuffer (this.response); break; case 404: throw 'Файл не знайдено'; default: throw 'Помилка вибору file '; catch (e) console.error (e);; xhr.send ();); Крок 7. Вкажіть кінець потоку
Коли API завершує додавання даних SourceBuffer a подія називається updatend звільнений. Всередині обробника події викличте кінець потоку() Метод MediaSource до позначають, що потік закінчився.
mediaSource.addEventListener ("sourceopen", функція () var sourceBuffer = this.addSourceBuffer (mime); var xhr = new XMLHttpRequest; xhr.open ('GET', 'sample.mp3'); xhr.responseType = 'arraybuffer' ; xhr.onload = function () try switch (this.status) випадок 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', function (_) mediaSource.endOfStream (); 404: throw 'File Not Found'; default: throw 'Не вдалося отримати файл'; catch (e) console.error (e);; xhr.send ();) ; Крок 8. Обріжте медіа-файл
The SourceBuffer об'єкт має два властивості називається appendWindowStart і appendWindowEnd що представляють час початку та закінчення медіаданих потрібно фільтрувати. Виділений код нижче фільтрує перші чотири секунди MP3.
mediaSource.addEventListener ("sourceopen", функція () var sourceBuffer = this.addSourceBuffer (mime); sourceBuffer.appendWindowEnd = 4.0; Демо
І це все, наші аудіо-зразок передається потоком прямо з веб-сторінки. Для вихідний код, подивіться на наш Github repo і для остаточного результату перевірте Демонстраційна сторінка.
Підтримка браузера
Що стосується написання цієї посади, то MediaSource API офіційно підтримується у всіх основних браузерах. Але тестування показує, що реалізація помилка в Firefox, браузери Webkit все ще мають проблеми з appendWindowStart власності.
Як і API MediaSource ще на стадії експерименту, Доступ до функцій вищого редагування може бути обмежений, але основне потокове передавання функція - це те, що ви можете використовуйте відразу.
