Поява тега audio в html5 дає нам можливість відтворювати звук. використовувати події. робити сторінки більш "живими". додаючи їм інтерактивності. Це. в свою чергу, зобов'язує кожного поважаючого себе вебмастера бути як мінімум в курсі останніх тенденцій в розвиненому з величезною швидкістю світі html-нововведень.
Ось на одному з таких html5-нововведень ми і зосередимося в даній темі. Вихідний код ми будемо мати у своєму розпорядженні між тегами
і ніяк не інакше. Розглянемо кілька варіантів подачі аудіо на сайт:
Варіант перший. Це класичний варіант. коли пишеться тег audio. всередині якого призначається атрибут controls. відповідальний за показ панелі управління відтворенням. між відкриває і закриває тегом audio прописується шлях до музичного файлу за допомогою тега sourse. Різні браузери відтворюють різні формати. тому бажано аудіофайл використовувати в двох розширеннях. mp3 і ogg.
Варіант другий. Відрізняється тим. що музика буде грати відразу при відкритті сторінки. в цьому нам допоможе атрибут autoplay. також буде виводитися панель управління. і для наочності додамо туди програвання по колу за допомогою атрибута loop. тобто після закінчення програвання аудіо йтиме повтор. і так постійно:
Варіант третій. іноді буває так що потрібно відтворити звук. музику і тд таким чином. щоб не було видно панелі управління. для цього потрібно прибрати з вихідного коду атрибут controls. який відповідає за виведення панелі управління відтворенням звуку. а ось атрибут autoplay в даному прикладі буде обов'язковий. інакше як ми натиснемо на кнопку відтворення якщо її не буде?
Виняток становлять випадки коли використовуються події миші. кліки. наведення і тд. Але це більш складні уроки. які ми будемо розбирати кожен окремо.
На прохання відвідувачів, додаю в даний урок кнопки для редагування:
Для цього потрібно рядку
Після цих маніпуляцій. ваш плеєр буде мати кнопки + - для гучності і паузу, плюс відтворювати спочатку з вказаною вами гучності
відтворення музики на сторінці