Како да стримујете скраћени аудио користећи МедиаСоурце АПИ
Са МедиаСоурце АПИ, можете генеришите и конфигуришите медијске токове у претраживачу. То вам омогућава обавља разне операције на медијским подацима држе ХТМЛ тагови повезани са медијима, као што су или . На пример, можете мешајте различите токове, креирајте преклапајуће медије, лази лоад медиа, и уреди метрику медија као што је промена јачине звука или фреквенције.
У овом посту ћемо посебно видети како стреам аудио узорак (скраћена МП3 датотека) са МедиаСоурце АПИ право у прегледачу да би музику пре-схов својој публици. Ми ћемо покрити како детектују подршку за АПИ, како да повежите ХТМЛ елемент медија на АПИ, како донеси медије преко Ајака, и на крају како стреам ит.
Ако желите да унапред видите шта радимо, погледајте у изворни код на Гитхуб-у, или проверите демо паге.
Корак 1. Креирајте ХТМЛ
Да бисте креирали ХТМЛ, додајте таг витх а контроле аттрибуте на своју страницу. За компатибилност уназад, такође додајте подразумевану поруку о грешци за кориснике чији претраживачи не подржавају ту значајку. Ми ћемо користити ЈаваСцрипт за укључивање / искључивање ове поруке.
Корак 2. Откривање подршке за прегледач
У ЈаваСцрипт-у направите а покушај да ухватиш блокирајте то баците грешку иф тхе МедиаСоурце АПИ није подржан преко корисниковог претраживача, или, са другим речима ако МедиаСоурце (кључ) не постоји у прозор објекат.
покушајте иф (! 'МедиаСоурце' у прозору) баците нови РеференцеЕррор ('Не постоји МедиаСоурце својство у објекту прозора.') цатцх (е) цонсоле.лог (е); Корак 3. Откривање МИМЕ подршке
Након провјере подршке, провјерите и за подршка типа МИМЕ. Ако прегледач не подржава МИМЕ тип медија који желите да емитујете, упозорите корисника и баците грешку.
вар миме = 'аудио / мпег'; иф (! МедиаСоурце.исТипеСуппортед (миме)) алерт ('Не могу да репродукујем медије. Медији типа МИМЕ' + миме + 'нису подржани.'); тхров ('Медиј типа' + миме + 'није подржан.'); Имајте на уму да исечак кода изнад мора бити стављен унутар покушати блокирати, пре улов блок (за референцу, следите нумерисање линије или проверите коначну ЈС датотеку на Гитхуб-у).
Корак 4. Повежите
Створити нова МедиаСоурце објекта, и додели га као извор таг помоћу УРЛ.цреатеОбјецтУРЛ () метода.
вар аудио = доцумент.куериСелецтор ('аудио'), медиаСоурце = нев МедиаСоурце (); аудио.срц = УРЛ.цреатеОбјецтУРЛ (медиаСоурце); Корак 5. Додајте а СоурцеБуффер противити се МедиаСоурце
Када ХТМЛ елемент медија приступа извору медија и спреман је цреате СоурцеБуффер објеката, МедиаСоурце АПИ пожари а соурцеопен догађај .
Тхе СоурцеБуффер објекат држи комад медија који се на крају декодира, обрађује и репродукује. Сингл МедиаСоурце предмет може имају више СоурцеБуффер објеката.
Унутар руковалац догађаја соурцеопен догађај, адд а СоурцеБуффер противити се МедиаСоурце са аддСоурцеБуффер () метода.
медиаСоурце.аддЕвентЛистенер ('соурцеопен', фунцтион () вар соурцеБуффер = тхис.аддСоурцеБуффер (миме);); Корак 6. Дохватите медије
Сада када имате СоурцеБуффер објекат, време је преузмите МП3 датотеку. У нашем примјеру, урадићемо то до краја користећи АЈАКС захтев.
Усе арраибуффер као респонсеТипе, која означава бинарне податке. Када се одговор успјешно дохвати, аппенд ит то СоурцеБуффер са аппендБуффер () метода.
медиаСоурце.аддЕвентЛистенер ('соурцеопен', фунцтион () вар соурцеБуффер = тхис.аддСоурцеБуффер (миме); вар кхр = нев КСМЛХттпРекуест; кхр.опен ('ГЕТ', 'сампле.мп3'); кхр.респонсеТипе = 'арраибуффер' ; кхр.онлоад = фунцтион () три свитцх (тхис.статус) цасе 200: соурцеБуффер.аппендБуффер (тхис.респонсе); бреак; цасе 404: тхров 'Филе Нот Фоунд'; дефаулт: тхров 'Неуспешно дохватање филе '; цатцх (е) цонсоле.еррор (е);; кхр.сенд ();); Корак 7. Означите крај потока
Када АПИ заврши са додавањем података СоурцеБуффер ан евент цаллед упдатенд је отпуштен. Унутар управљача догађаја, позовите крај потока() метод МедиаСоурце до означава да је ток завршен.
медиаСоурце.аддЕвентЛистенер ('соурцеопен', фунцтион () вар соурцеБуффер = тхис.аддСоурцеБуффер (миме); вар кхр = нев КСМЛХттпРекуест; кхр.опен ('ГЕТ', 'сампле.мп3'); кхр.респонсеТипе = 'арраибуффер' ; кхр.онлоад = фунцтион () три свитцх (тхис.статус) цасе 200: соурцеБуффер.аппендБуффер (тхис.респонсе); соурцеБуффер.аддЕвентЛистенер ('упдатеенд', фунцтион (_) медиаСоурце.ендОфСтреам (); 404: тхров 'Филе Нот Фоунд'; дефаулт: тхров 'Неуспешно дохватање датотеке'; цатцх (е) цонсоле.еррор (е);; кхр.сенд ();) ; Корак 8. Скратите медијску датотеку
Тхе СоурцеБуффер објекат има два својства зове аппендВиндовСтарт и аппендВиндовЕнд репресентинг тхе време почетка и завршетка медија података желите да филтрирате. Означени код испод филтрира прве четири секунде оф тхе МП3.
медиаСоурце.аддЕвентЛистенер ('соурцеопен', фунцтион () вар соурцеБуффер = тхис.аддСоурцеБуффер (миме); соурцеБуффер.аппендВиндовЕнд = 4.0;…); Демо
И то је све, наше аудио узорак се емитује директно са веб странице. За изворни код, погледајте наш Гитхуб репо и за коначни резултат, погледајте демо паге.
Подршка за претраживач
Од писања овог поста МедиаСоурце АПИ је званично подржан у свим већим претраживачима. Али тестирање показује да је имплементација је грешка у Фирефоку, и Вебкит претраживачи и даље имају проблема са аппендВиндовСтарт својство.
Као што је МедиаСоурце АПИ још у експерименталној фази, приступ функцијама вишег уређивања може бити ограничен, али басиц стреаминг функција је нешто што можете искористите одмах.
