Добавление аудиозаписи в электронный учебник
Звуковые файлы, по аналогии с видеофайлами, можно добавлять в электронный учебник с помощью тега <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>
Атрибуты <audio>
| Атрибут | Описание |
|---|---|
| controls | включает панель управления воспроизведением аудио |
| autoplay | автоматическое воспроизведение аудио, после загрузки страницы |
| muted | отключаем звук аудиоплеера |
| loop | циклическое воспроизведение аудиоролика |
Атрибуты <source>
| Атрибут | Описание |
|---|---|
| type | определяет MIME-тип аудиофайла |
| src | указывает путь к аудиофайлу, относительно папки public_html |
- Совет
-
Для большого количества звуковых файлов, в каталоге audio, лучше создавать вложенные папки. Тогда в атрибут src придётся дописать соответствующий путь. Например, user-files/audio/folder1/audio2.mp3