Найти в Дзене
Girsoft
99 подписчиков

HTML: как вставить аудио на сайт: разбираем на примерах

3
2 мин
Привет, коллеги! Сегодня будем разбирать работу с аудио на сайте. Вроде бы простая вещь, но есть несколько важных нюансов, о которых знают не все. 👉 <audio controls src="музыка.mp3"></audio> Вот что получится: 👉 <audio controls> <source src="звук.mp3" type="audio/mpeg"> <source src="звук.ogg" type="audio/ogg"> Ваш браузер не поддерживает аудио </audio> Почему так лучше: 👉 `<audio id="track" src="музыка.mp3"></audio>
<button onclick="togglePlay()">▶️</button> <script> function togglePlay() { const audio = document.getElementById('track'); audio.paused ? audio.play() : audio.pause(); } </script>` Но это темы для отдельного разговора. Попробуйте добавить аудио на свою тестовую страницу прямо сейчас. Начните с простого варианта, потом усложняйте. Если возникнут вопросы — спрашивайте в комментариях!
Оглавление

Привет, коллеги! Сегодня будем разбирать работу с аудио на сайте. Вроде бы простая вещь, но есть несколько важных нюансов, о которых знают не все.

Базовый вариант (минимум кода)

👉 <audio controls src="музыка.mp3"></audio>

Вот что получится:

  • Кнопка воспроизведения
  • Ползунок прогресса
  • Громкость
  • Иконка полноэкранного режима (если поддерживается)

Полная версия с поддержкой разных форматов

👉 <audio controls> <source src="звук.mp3" type="audio/mpeg"> <source src="звук.ogg" type="audio/ogg"> Ваш браузер не поддерживает аудио </audio>

Почему так лучше:

  1. Поддержка разных браузеров (MP3 работает везде, но OGG меньше весит)
  2. Запасной вариант для старых браузеров

Основные атрибуты, которые реально пригодятся

  1. Автовоспроизведение (осторожно, раздражает пользователей!)
    👉 <audio autoplay src="фоновый-звук.mp3"></audio>
  2. Без контроля (только для фонового звука)
    👉 <audio src="эффект.mp3" id="sound"></audio>
  3. Зацикливание
    👉 <audio loop src="мелодия.mp3"></audio>

Как управлять через JavaScript

  1. Воспроизведение:
    👉 document.getElementById('myAudio').play()
  2. Пауза:
    👉 document.getElementById('myAudio').pause()
  3. Проверка состояния:
    👉 const isPlaying = !document.getElementById('myAudio').paused

Практический пример: кнопка play/pause

👉 `<audio id="track" src="музыка.mp3"></audio>
<button onclick="togglePlay()">▶️</button>

<script> function togglePlay() { const audio = document.getElementById('track'); audio.paused ? audio.play() : audio.pause(); } </script>`

Оптимизация звуковых файлов

  1. Конвертируйте в MP3 с битрейтом 128 kbps — оптимальное качество/размер
  2. Для коротких звуков используйте OGG (меньше вес)
  3. Указывайте preload="none" для экономии трафика:
    👉 <audio preload="none" controls src="звук.mp3"></audio>

Частые проблемы и решения

  1. Не работает autoplay
    Современные браузеры блокируют автовоспроизведение с звуком. Решение:
    👉 <audio autoplay muted src="фоновый-звук.mp3"></audio>
  2. Разный уровень громкости
    Нормализуйте аудио в Audacity или подобных программах
  3. Большой размер файла
    Используйте аудиокодек Opus (.opus) — лучшее сжатие с сохранением качества

Продвинутые техники

  1. Визуализация звука (нужен Web Audio API)
  2. Плавное изменение громкости
  3. Создание плейлистов

Но это темы для отдельного разговора.

Важно запомнить

  1. Всегда добавляйте controls — пользователь должен управлять воспроизведением
  2. Тестируйте на разных устройствах — особенно на iOS
  3. Не злоупотребляйте фоновым звуком — это раздражает посетителей

Попробуйте добавить аудио на свою тестовую страницу прямо сейчас. Начните с простого варианта, потом усложняйте. Если возникнут вопросы — спрашивайте в комментариях!