Как добавить аудио на страницу

Короткий ответ

Вставьте <audio> с атрибутом controls — браузер покажет плеер с кнопкой запуска и громкостью:

<audio src="/media/t-rex-roar.mp3" controls></audio>

Без controls элемент невидим, и звук можно запустить только из JavaScript.

Ширина плеера

Плеер можно растянуть, как обычный блок, — например, на всю ширину карточки:

<figure style="margin: 0; max-width: 360px;">
  <figcaption>T. rex roar</figcaption>
  <audio src="/media/t-rex-roar.mp3" controls loop style="width: 100%;"></audio>
</figure>

loop повторяет запись по кругу. Внешний вид кнопок у разных браузеров свой, и CSS их почти не меняет. Если нужен плеер в стиле сайта, его собирают из кнопок и JavaScript.

Форматы и предзагрузка

MP3 играют все современные браузеры. Если файлов несколько, перечислите их в <source> с атрибутом type. Атрибут preload="none" запрещает скачивать файл до нажатия на кнопку — полезно, когда на странице много записей.

Частая ошибка

Ставят autoplay, чтобы музыка играла при открытии страницы. Браузеры блокируют автозапуск звука, пока посетитель ничего не нажал, — а если бы не блокировали, неожиданный звук раздражал бы и мешал программам чтения с экрана. Оставьте запуск пользователю.