73. Звук в HTML5 - элемент AUDIO

В предыдущем уроке познакомились с элементом <canvas>, который создает холст для рисования.

До появления HTML5 и flash было тяжело вставить аудио на страницу. С появлением flash стали использовать его для вставки аудио на страницу. Вместе с HTML5 появился тег audio, благодаря которому легко можно вставить аудио на страницу.

В примере ниже показано, как добавить аудио файл на страницу HTML:

<audio src = "click.mp3"></audio> 

Вставить музыку также просто, как и вставить картинку в HTML страницу. В атрибут src указывается путь к файлу.

Некоторые форматы поддерживают не все браузеры, поэтому можно поступить следующим образом:

<audio>
    <source src = "click.mp3">
    <source src = "click.ogg">
</audio> 

Если хотите воспроизведение звука при открытии страницы, добавьте атрибут autoplay.

<audio autoplay>
    <source src = "click.mp3">
    <source src = "click.ogg">
</audio> 

Примечание

Многих (всех у кого включен звук) раздражает самовоспроизводящийся звук!

Можем добавить кнопки управления, для этого используем атрибут controls.

<audio controls>
    <source src = "click.mp3">
    <source src = "click.ogg">
</audio> 

А еще можем зациклить аудио на нашей HTML-странице. Для этого указываем атрибут loop.

<audio loop>
    <source src = "click.mp3">
    <source src = "click.ogg">
</audio> 

В этом уроке мы научились вставлять аудио на HTML-страницу, указывать несколько форматов для различных браузеров и познакомились с атрибутами autoplay, controls и loop. В следующем уроке будем вставлять видео на веб-страницу.

Похожие уроки Codebra

1. Практики нет, просто нажмите "Проверить задание".

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.