Тег <audio>: звук с управлением и текстовой расшифровкой
Элемент audio размещает на странице аудиозапись. Пользователю нужны понятные средства запуска, паузы и изменения громкости, а содержание записи желательно предоставить также текстом.
Назначение
Элемент audio размещает на странице аудиозапись. Пользователю нужны понятные средства запуска, паузы и изменения громкости, а содержание записи желательно предоставить также текстом.
Как это работает
Атрибут controls включает встроенное управление, preload="none" предлагает не загружать запись заранее. Это подсказка браузеру, а не абсолютный запрет сетевого запроса. Источники перечисляются внутри элемента через source.
Пример
<audio controls preload="none">
<source src="/media/intro.mp3" type="audio/mpeg">
Встроенное воспроизведение недоступно.
</audio>
<p><a href="/media/intro.mp3">Аудиозапись: MP3</a></p>
<p>Расшифровка: перед началом работы создайте отдельную папку проекта.</p>Что должно получиться
В собственном проекте с существующим intro.mp3 появляется плеер. Отдельная ссылка остаётся доступной вне audio. В справочнике путь учебный: сам звуковой файл в комплект примера не входит.
Граница применения и частая ошибка
Вложенный запасной текст не служит универсальным сообщением об ошибке загрузки файла. Не рассчитывайте на автоматическое воспроизведение и не делайте звук единственным способом получить инструкцию.
Самостоятельная проверка
Подключите короткую запись, на которую у вас есть права. Проверьте плеер клавиатурой, доступность ссылки и совпадение расшифровки с записью. Затем намеренно измените имя файла и посмотрите ответ в Network.