Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Site Elements
Webdesign

Створення HTML5 аудіоплеєра з можливістю налаштування

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) translation by Nick Nathan (you can also view the original English article)

В цьому уроці я познайомлю вас з HTML5 аудіо та покажу, як створити свій власний плеєр.

Якщо ви хочете піти коротшим шляхом, погляньте на готовий HTML5 аудіоплеєр, доступний на Envato Market. Він дозволяє створювати плейлисти з різних джерел і має величезний набір функцій для налаштування.

HTML5 Audio Player with Playlist
Аудіоплеєр HTML5 з плейлистом

Ви також знайдете безліч експертів по HTML5 на Envato Studio, які можуть допомогти вам.


Введення

До теперішнього часу інтеграція аудіо в веб-проект була втомливим процесом, в значній мірі залежала від сторонніх плагінів, таких як Flash. Після горезвісної відмови iPhone від плагіна і новини про те, що Adobe більше не підтримує Flash для мобільних пристроїв, багато розробників шукають інші способи включення аудіо в свої проекти. Саме тут з'являється аудіо HTML5, щоб вирішити проблему.

Хоча HTML5 надає стандарт відтворення аудіофайлів в Інтернеті, він знаходиться на початковому етапі і ще довго не зможе надавати те, що є, наприклад, у Flash. Проте для більшості випадків, цього буде достатньо.


Просте аудіо Html5 

Найпростіший спосіб інтегрувати аудіо в веб-сторінку за допомогою HTML5 - це використати новий тег audio. Додайте його в свій документ HTML5 з наступним кодом:

Якщо ви подивитесь на приведений вище код, ви побачите, що я об'явив тег  <audio> и визначив атрибут controls, щоб ми бачили елементи управління програвача по замовчуванню.

У нас є два тега 'src', вкладених в <audio>. Один визначає MP3 трек, а інший визначає формат OGG. Формат OGG особливо потрібен, щоб дозволити музиці грати в Firefox із-за проблем з ліцензуванням. Firefox не підтримує MP3 без використання плагіна. Рядок тексту "Ваш браузер не підтримує аудіоелемент" дозволяє користувачам з браузерами, які не підтримуються, знати, що відбувається.


Аудіоплеєр HTML5 за замовчуванням.

Атрибути тегів аудіо Html5

Окрім підтримки глобальних атрибутів HTML5, тег також підтримує набір унікальних атрибутів.

  • autoplay - його значення може бути "true" або пустим "", щоб визначити, чи повинен трек грати автоматично одразу після завантаження сторінки.
  • controls - як ми бачили в прикладі вище, він визначає, чи будуть відображатися рідні опції, такі як "play", "pause".
  • Loop - може набувати значення "loop" і визначає, чи повинен трек грати знову, коли він закінчився.
  • preload - може приймати значення "auto" (яке описує, чи повинен файл завантажуватися разом з завантаженням сторінки), "metadata" (який визначає що повинно бути завантаженим: метадата, заголовок треку тощо), "none" (яке вказує, що браузер не повинен завантажувати файл, коли завантажується сторінка).
  • src - як і в прикладі вище визначає url музики, яку повинен грати тег audio.

Запустимо його на повну

В останніх декількох кроках ми розглянули просту форму аудіо HTML5. Коли ми починаємо використовувати аудіо тег з javascript, ми можемо створювати насправді цікаві і корисні аудіоплеєри. Давайте подивимося, що може зробити для нас jQuery. Після того, як ми визначили document ready в jQuery, ми можемо створити нову змінну audio, щоб зберегти наші аудіофайли простими:

Це дійсно дуже просто! Тоді кожного разу, коли ми хочемо виконати дію над audio, ми можемо викликати його, використовуючи змінну "myaudio". Ось список дій, які ви можете зробити зі змінною. Запам'ятайте їх, пізніше ми будемо використовувати деякі з них в нашій статті, коли створюватимемо наш аудіоплеєр.

Якщо ви хочете, щоб функція була викликана після завершення відтворення звуку, ви можете використати 'myaudio.addEventListener('ended',myfunc)'. Це викличе 'myfunc()', коли аудіо закінчиться.


Створення аудіоплеєра HTML5: розмітка

Тепер, коли у вас є трохи початкових даних для аудіо HTML5 і розуміння основних принципів, настав час застосувати їх на практиці і створити аудіоплеєр HTML5 з можливістю налаштування. Я пропущу етап дизайну, оскільки це виходить за межі даного уроку, але ви можете завантажити accompanying source code і переглянути PSD, щоб мати уявлення про те, як все збирається в одне ціле.

Верхня частина складається з HTML5 doctype. Yahoos CSS Reset, шрифт Google "Lobster" для заголовку. Далі беремо останній jQuery і налаштовуємо файл JavaScript js.js. На кінець, у нас є html5slider.js, який дозволяє Firefox відображати тип діапазону вводу HTML5, який ми використовуватимемо для аудіо scrubber.

Після заголовку h1, я зробив div з класом "container" і "gradient". Я створив окремий клас градієнта, оскільки він буде повторно використовуватися для деяких інших елементів. Всередині ".container" я додав зображення (воно буде обкладинкою альбому). Тоді три якірні теги будуть діяти як елементи управління плеєром. Між ними ви знайдете поле вводу діапазону scrubber/HTML5.


Створення аудіоплеєра HTML5: стилі

Замість того, щоб перебирати кожен аспект CSS, я зроблю огляд того, на що ви напевно хотіли б звернути увагу.

В коді нижче я створив градієнт плеєра, який був згенерований за допомогою CSS gradient editor. Далі я створив «.container» з деякими переходами  CSS3.

Ви помітите, що я використовував атрибут box sizing CSS3, зі значенням 'border-box'. Це відступ 10 рх навколо контейнера, з шириною 427 рх в даному випадку. Якщо цього не зробити, буде додано відступ до 427 рх і контейнер буде більшим, ніж потрібно. В наш час застосовувати * {box-sizing: border-box;} стає поширеною практикою, що робить стилізацію більш інтуїтивно зрозумілою.

Я також додав переходи CSS3 в «.coverlarge», щоб дозволити деякі приємні переходи при першому відкритті програвача. Спочатку CSS може здатися дещо пригнічуючим, але багато-чого тут - це специфічні префікси браузера, щоб впевнитись, що аудіоплеєр виглядає і функціонує однаково в різних браузерах.


Ось так аудіоплеєр повинен виглядати на даному етапі.

Оскільки контейнер для плеєра завершено, прийшов час створити елементи управління. Більшість кнопок було створено за допомогою CSS sprites.

На жаль, IE ще не підтримує введення діапазону HTML5, тому я вирішив не показувати audio scrubber користувачам IE. Якщо це для вас неприйнятно, можете використовувати  jQuery UI slider аналогічно методу, яким я скористався. Тим не менше, я просто приховав scrubber, input{display:none\9!important;}. Це приховує введення для користувачів ie (перевірте цей рядок на Stack Overflow для більш детальної інформації щодо \9).

Проблема з повзунком діапазону HTML5 в тому, що тільки декілька браузерів підтримують стилізацію такого роду, в основному це браузери WebKit (Chrome і Safari). На жаль, Opera і Firefox покажуть тільки звичайний слайдер. Якщо вам потрібен стиль користувача в усіх браузерах, ви можете скористатися  jQuery UI slider, про що згадувалося раніше. Ви бачите стиль користувача для браузерів WebKit в атрибуті input :: - webkit-slider-thumb.


Створення аудіоплеєра HTML5:  jQuery

Коли у вас готові стиль і розмітка, прийшов час оживити плеєр. Зробимо це за допомогою javascript framework jQuery. Оскільки  jQuery document ready було об'явлено, ми створюємо деякі змінні, всередині яких можемо зберігати наші об'єкти jQuery.

Ви бачите в наведеній вище змінній "song", що ми заявили два трека. Формат OGG для Firefox і MP3 для інших браузерів. Далі я створюю умовний IF, щоб ми могли перевірити, чи буде наш браузер відтворювати MP3. Якщо так, тоді ми перетворюємо джерело "song" в MP3-трек, якщо ні, він буде відтворюватися в форматі «OGG».

Наступне, що ми збираємося зробити - це функції кліків, які дозволять нам відтворювати трек або робити паузу. Я використовую функцію play(), щоб запустити звук, а потім метод jQuery replaceWith, який замінює кнопку відтворення кнопкою паузи.

Я також додав класи «coverLarge» і «containerLarge» в "container" і "cover". Оскільки я додав CSS3 переходи раніше, це додасть красивий перехід, коли трек починатиме грати. Функція "pause" працює аналогічно, але без переходів. Натискання змінює кнопку pause на кнопку "play".

Кнопки відключення звуку працюють аналогічно кнопкам відтворення і паузи, проте викликають відповідні дії і змінюють кнопки на відповідну альтернативу.

Коли користувач натискає кнопку "close", ми викликаємо jQuery для видалення класів «containerLarge» і «coverLarge". Це приховає обкладинку і закриє плеєр. Далі ми призупиняємо плеєр, викликаючи дію pause () і відновлюючи аудіо currentTime на 0. Це повертає аудіодоріжку на початок.

Настав час перейти до аудіо scrubber, якому присвоєно ідентифікатор "seek". Перша функція дозволяє нам перемістити scrubber в будь-яку частину аудіо. Це робиться шляхом змін, коли хто-небудь переміщує скруббер. Далі ми встановлюємо song.currentTime, щоб він відповідав частині пісні, в яку перемістився scrubber. Ми також переміщуємо атрибут max, щоб відображати тривалість пісні.

Остання частина на закінчення щодо jQuery полягає в тому, щоб змусити скруббер "#seek" переміщуватися разом з тривалістю звуку. Ми додамо до нього прослуховувач, а при оновленні часу аудіо ми можемо викликати функцію. Я встановив змінну «curtime», щоб отримати поточне значення часу пісні. Далі я оновив значення скруббера, щоб відобразити поточну часову позицію аудіо.

Ну ось і все! Аудіоплеєр HTML5, який ви можете інтегрувати на своєму сайті або додатку.


Закінчення

Як згадувалось раніше, аудіоплеєр HTML5 знаходиться на стадії розвитку і потребує вдосконалень. На даний момент аудіо передається з сервера, тому деякі браузери мають труднощі з відтворенням. Це не завжди є проблемою, а просто означає, що інколи відтворення аудіо розпочнеться до того, як трек повністю завантажиться.

Це може бути проблемою, якщо ви хочете використовувати аудіоплеєр HTML5 для звукових ефектів в іграх або додатках з інтенсивним звуком. Саме тому наші друзі з Google розробили метод покращення слабких місць аудіотеки. Компанія Google розробила і представила пропозиції W3C щодо "Web Audio API". Це виявилось набагато потужнішим варіантом, ніж аудіо HTML5, хоча на даному етапі є одне питання (здогадались, яке саме?): він працює тільки на Chrome.

Ви можете дізнатися більше про API Web Audio Google, а також ознайомитися з прикладами на Google code або перегляньте web audio specification.

Я сподіваюсь, що вам сподобалось вивчення аудіо HTML5 і як створити свій власний аудіоплеєр. Мій плеєр включає базовий контроль, проте вам нічого не заважає додати більше функцій, наприклад управління гучністю або навіть власну анімацію. Трошки помізкувавши і проводячи експерименти, ви справді можете створити чудові аудіоплеєри. Завантажте початковий код і я з нетерпінням чекатиму на ваші результати!

Якщо ви хочете поглянути на більше опцій для роботи з аудіоплеєрами та іншими медіа в HTML5, перейдіть до розділу HTML5 Media на Envato Market.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.