Как да поточно съкратен аудио с помощта на MediaSource API
С API на MediaSource, можеш генериране и конфигуриране на медийни потоци в браузъра. Това ви позволява извършват различни операции с медийни данни свързани с медийни HTML тагове, като например или . Например, можете смесвайте различни потоци, създаване на припокриващи се медии, мързеливи носители, и редактирайте метрични показатели като променяте обема или честотата.
В тази публикация ще видим конкретно как поточно аудио извадка (съкратен MP3 файл) с API на MediaSource в браузъра, за да Предварително шоу музика на вашата аудитория. Ще разгледаме как да откриване на поддръжка за API, как да свържете HTML медийния елемент към API, как да донесе медиите чрез Ajax и накрая как поток.
Ако искате да видите предварително какво правим, погледнете изходния код на Github, или проверете демо страница.
Стъпка 1. Създайте HTML
За да създадете HTML, добавете маркер с a контроли атрибут към вашата страница. За обратна съвместимост добавете съобщение за грешка по подразбиране за потребители, чиито браузъри не поддържат функцията. Ще използваме JavaScript, за да включим / изключим това съобщение.
Стъпка 2. Открийте поддръжката на браузъра
В JavaScript създайте a опитай да хванеш блок, който ще хвърли грешка ако API на MediaSource не се поддържа от браузъра на потребителя или с други думи, ако MediaSource (ключът) не съществува в прозорец обект.
опитайте if (! 'MediaSource' в прозореца) хвърлете нов ReferenceError ('Няма свойство MediaSource в обект на прозорец.') 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 sourceopen събитие .
Най- SourceBuffer обект държи част от медиите която е в крайна сметка декодирана, обработена и възпроизведена. Сингъл MediaSource обектът може имат няколко SourceBuffer обекти.
Вътре събитие за обработване на събития sourceopen събитие, добави SourceBuffer обект на MediaSource с addSourceBuffer () метод.
mediaSource.addEventListener ('sourceopen', функция () var sourceBuffer = this.addSourceBuffer (mime);); Стъпка 6. Донесете медиите
Сега, когато имате SourceBuffer обект, време е извличане на MP3 файла. В нашия пример ще го направим използване на AJAX заявка.
употреба arraybuffer като responseType, който означава двоични данни. Когато отговорът е успешно извлечен, добавете го към SourceBuffer с appendBuffer () метод.
mediaSource.addEventListener ('sourceopen', функция () var sourceBuffer = this.addSourceBuffer (mime); var xhr = new XMLHttpRequest; xhr.onload = function () try switch (this.status) случай 200: sourceBuffer.appendBuffer (this.response); прекъсване; случай 404: хвърли 'File Not Found'; файл '; catch (e) console.error (e);; xhr.send ();); Стъпка 7. Посочете края на потока
Когато API приключи добавянето на данните към SourceBuffer един събитие updatend е уволнен. Вътре в манипулатор на събития, обадете се на край на поток() метод MediaSource да се показва, че потокът е приключил.
mediaSource.addEventListener ('sourceopen', функция () var sourceBuffer = this.addSourceBuffer (mime); var xhr = new XMLHttpRequest; ; xhr.onload = function () try switch (this.status) случай 200: sourceBuffer.appendBuffer (this.response); sourceBuffer.addEventListener ('updateend', function ()) 404: хвърли 'File Not Found'; default: хвърли 'Неуспешно извличане на файла'; catch (e) console.error (e);; xhr.send ();) ; Стъпка 8. Орязване на медийния файл
Най- 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 е все още в експериментална фаза, достъпът до по-високи функции за редактиране може да бъде ограничен, но основно поточно предаване функция е нещо, което можете използвайте веднага.
