Радио плейър с помощта на HTML5 - аудио, w3 образование

Преди появата на HTML5 е изключително неудобно да добавите звук към своите уеб страници. В продължение на години, Flash беше единственият начин да се вгради аудио съдържание - но с въвеждането на етикет

В тази статия ще разгледаме маркера

Basic синтаксис аудио тагове

елемент

Браузърът ще създаде прост играч на дадена уеб страница. По-долу е член

елемент

SRC съдържа пътя към аудио файла, който искате да играете. Src атрибут може също да бъде заместен с един или повече маркери вътре аудио елемента:

Това ви позволява да използвате няколко елемента . да се уточни различни аудио формати. Както ще се правят различни браузъри поддържат различни формати, така че в идеалния случай трябва да зададете различни формати, за да се даде възможност на играча да работят във всички браузъри. Например:

автоматично пускане - атрибут позволява да възпроизвеждате аудио автоматично, веднага след като зареждането на страницата.

Забележка: Имайте предвид, че Autorun дразни много потребители. Ако използвате функцията за автоматично стартиране, дават възможност на потребителя за пауза във възпроизвеждането.

autobuffer - атрибут, който позволява автоматично да изтеглите аудио поток веднага след зареждането на страницата без автоматично възпроизвеждане. Този атрибут е валидна само ако не се пуска автоматично атрибут.

контур - атрибут ви позволява да играете на няколко пъти след края на пиесата.

Ние също така да промените SRC атрибут:

Що се отнася до audio.play () метод и audio.pause (), можете да започнете или пауза на възпроизвеждането на файла. Audio.volume параметър определя обема и timeupdate на събитието манипулатор работи всеки път, когато възпроизвеждането се актуализира. Тези прости техники ще бъдат достатъчни, за да се създаде радио плеър.

Нека да разгледаме тези функции в действие! Следващият скрипт ще създаде елемент

Горната сценария се прилага към този HTML код:

Ако искате да знаете повече за Audio API, предлагам ви да се запознаете с статията Simon Peters "всичко, което трябва да знаете за HTML5 видео и аудио".

подкрепа Codec в браузърите

В подкрепа на различни браузъри, ние трябва да се уточни и същ аудио запис в няколко формата. Както бе споменато по-рано, можете да посочите няколко различни формати, използвайки тагове . поставена във вътрешността на елемента

За съвместимост със стари браузъри, които не поддържат елемент

Стрийминг чрез елемент

Направихме плейъра, като използвате аудио маркер. може да играе аудио файлове в различни браузъри. Въпреки това, сега сме изправени пред въпроса - как да се справят с поточно аудио данни с помощта на елемента

Създаване на HTML5 плейър

Ние ще използваме аудиопотока предоставена от норвежки радио NRK. NRK предоставя на всеки радиоканал в два формата: Ogg и MP3, така че ние имаме два източника за поточно аудио.

Данни за създаване на играч

Създаване на структурата и дизайна на играча

Следващата ни стъпка е да се създаде HTML структура за играча и неговите контроли:

всеки елемент и

Разполага със собствен идентификатор номер. така че да може лесно да се позове на тези елементи и да се определят със събития, за да управлявате плейъра с помощта на аудио API.

Всеки бутон е в рамка с помощта на CSS:

Трябва също да се отбележи, че помолихме клас .radio-подразбиране за елемента

. който съдържа цялата играч. Сега можем да го използваме, за да се определи лесно стилове в CSS:

С възможността за инсталиране на няколко групи, в един единствен елемент в HTML, можем да създадем стилове играч (скинове) и да превключвате между тях, просто чрез промяна на един от класовете:

Ще принуди играча да работят

Последният ни стъпка в използването на jPlayer плъгин - създаване на необходимата функционалност. Първо трябва да се свърже с HTML скриптове JQuery библиотека и jPlayer плъгин, както и със собствен код на файла, за да изберете играч (player.js), добавяне на следния код:

Първо, създаване на променлива обект JQuery, в която се генерира елемента

На следващо място, ние получаваме данни за необходимите аудио и видео във формат JSON с помощта на AJAX:

Когато AJAX-заявка ще се върне на данни от сървъра, трябва да избягвате всички канали, получени в течение, и да го добавите към списъка за избор на каналите за играч. Списък за избор на канал - в нашия случай това е просто списък с изображения от логото на всеки канал и OnClick манипулатор събитие за всяко изображение за промяна на аудио поток в плейъра, което позволява на потребителя да избере някоя от наличните канали.

Функцията прикрепена към OnClick събитие за всяко изображение в списъка за избор на канал съдържа викането на метода изчистване на текущия файл се играе и на начина за избор на нов елемент на потока

Включете jPlayer се грижи за почистването на стария поток и монтаж на нов елемент в

Горният код добавя jPlayer елемент с ID #player. Настройката на плъг-ин разговор ние се елемент

В готова функция за учредяване на радио канал по подразбиране.

И накрая, ние се отбележи, плъгина jPlayer идентификатори различни бутони за управление и настройка на събитието манипулатор, когато играят аудио, да се промени по време на нашата игра на играча.

заключение

В тази статия се опитах да се разгледа в детайли HTML5 елемента