У HTML ми можемо вбудовувати аудіо та відео контент безпосередньо на веб-сторінки за допомогою тегів <audio> та <video>, відповідно. Давайте спочатку обговоримо вбудовування аудіо:

Вбудовування аудіо

Тег <audio> вбудовує аудіо контент у HTML документ. Він дозволяє відтворювати аудіо файли безпосередньо в браузері.

Атрибути аудіо

• controls: Додає стандартні елементи керування аудіо, такі як відтворення, пауза та регулювання гучності, до плеєра;
• autoplay: Вказує, чи повинно аудіо почати відтворюватися автоматично при завантаженні сторінки;
• loop: Вказує, чи повинно аудіо відтворюватися безперервно.

Приклад:

<audio controls autoplay loop>
  <!-- Some other tags -->
</audio>

Ви могли помітити, що ми лише вказали характеристики аудіо плеєра, але не згадали звідки надходить аудіо. Нам потрібен тег <source>.

Джерело

Тег <source> використовується всередині тега <audio> для вказівки URL аудіофайлу та його атрибутів. Ми можемо використовувати атрибут src для вказівки URL аудіофайлу та атрибут type для вказівки MIME-типу аудіофайлу.
Приклад:

<audio controls autoplay loop>
  <source src="audio-url.mp3" type="audio/mpeg" />
  <source src="audio-url.ogg" type="audio/ogg" />
  Your browser does not support the audio element.
</audio>

У наведеному вище прикладі:

• Тег <audio> включає атрибути, такі як controls, autoplay та loop;
• Теги <source> вказують URL джерел аудіофайлів та їх MIME-типи;
• Якщо браузер не підтримує тег <audio> або вказані аудіоформати, відображається альтернативний текст Your browser does not support the audio element.

Відео урок