Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Вбудовування Аудіофайлів у HTML | Зображення та медіа
Основи HTML

bookВбудовування Аудіофайлів у HTML

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

index.html

copy

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

1. Який тег використовується для вбудовування аудіоконтенту в HTML-документ?

2. Чому рекомендується надавати аудіо у декількох форматах?

question mark

Який тег використовується для вбудовування аудіоконтенту в HTML-документ?

Select the correct answer

question mark

Чому рекомендується надавати аудіо у декількох форматах?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 3

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Awesome!

Completion rate improved to 3.13

bookВбудовування Аудіофайлів у HTML

Свайпніть щоб показати меню

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

index.html

copy

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

1. Який тег використовується для вбудовування аудіоконтенту в HTML-документ?

2. Чому рекомендується надавати аудіо у декількох форматах?

question mark

Який тег використовується для вбудовування аудіоконтенту в HTML-документ?

Select the correct answer

question mark

Чому рекомендується надавати аудіо у декількох форматах?

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 3
some-alt