У 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..

Відеоінструкція