Добавление аудиозаписи в электронный учебник

Звуковые файлы, по аналогии с видеофайлами, можно добавлять в электронный учебник с помощью тега <audio>.

Добавление <audio>#

Браузеры поддерживают три основных формата звуковых файлов: MP3, WAV, OGG. Аудиофайл можно подключить с помощью тега <audio>.

Совместимость аудиоформатов в браузерах:

Браузер MP3 WAV OGG
Yandex Browser да да да
Google Chrome да да да
Mozilla Firefox да да да
Opera да да да
Internet Explorer да нет нет

В папкe user-files создайте папку audio и скопируйте в неё ваш аудиофайл (audio1.mp3). 

На вкладке HTML-код, нужно найти закрывающий тег абзаца </p>, после которого вы хотите встроить звуковой файл. И после него вставить следующий код:

<audio controls>
	<source src="user-files/audio/audio1.mp3" type="audio/mp3">
	<source src="user-files/audio/audio1.wav" type="audio/wav">
	<source src="user-files/audio/audio1.ogg" type="audio/ogg">
</audio>

Обратите внимание, внутри тега <audio> находятся несколько тегов <source>. Это означает, что аудиофайл будет воспроизведён в одном из поддерживаемых браузером форматов.

Обычно достаточно одного формата .mp3:

<audio controls>
	<source src="user-files/audio/audio1.mp3" type="audio/mp3">
</audio>
Встраивание аудио на страницу учебника
Рис 1. Встраивание аудио на страницу учебника

Атрибуты <audio>

Атрибут Описание
controls включает панель управления воспроизведением аудио
autoplay автоматическое воспроизведение аудио, после загрузки страницы
muted отключаем звук аудиоплеера
loop циклическое воспроизведение аудиоролика

Атрибуты <source>

Атрибут Описание
type определяет MIME-тип аудиофайла
src указывает путь к аудиофайлу, относительно папки public_html
Совет

Для большого количества звуковых файлов, в каталоге audio, лучше создавать вложенные папки. Тогда в атрибут src придётся дописать соответствующий путь. Например, user-files/audio/folder1/audio2.mp3