Атрибут src тега <audio>
Описание
Атрибут src для тега <audio> указывает URL-адрес аудиофайла, который должен быть воспроизведен. Это основной атрибут, определяющий источник медиа-контента для аудио элемента.
<audio controls src="audio/soundtrack.mp3">
Ваш браузер не поддерживает аудио элемент.
</audio>
Основные характеристики:
| Параметр | Описание | Важность |
|---|---|---|
| Поддерживаемые форматы | MP3, WAV, OGG, AAC | Высокая |
| Относительные/абсолютные пути | Любые валидные URL | Средняя |
| CORS-ограничения | Требует настройки на сервере | Высокая |
Альтернативные источники (элемент <source>):
<audio controls>
<source src="audio/sound.ogg" type="audio/ogg">
<source src="audio/sound.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудио элемент.
</audio>
JavaScript управление src:
const audioPlayer = document.getElementById('audioPlayer');
// Установка нового источника
audioPlayer.src = 'new-track.mp3';
// Загрузка и воспроизведение
audioPlayer.load();
audioPlayer.play().catch(e => console.error(e));
// Получение текущего источника
console.log('Текущий аудиофайл:', audioPlayer.src);
Динамическая смена трека:
<audio id="player" controls></audio>
<button onclick="playTrack('song1.mp3')">Трек 1</button>
<button onclick="playTrack('song2.mp3')">Трек 2</button>
<script>
function playTrack(url) {
const player = document.getElementById('player');
player.src = url;
player.play().catch(e => console.error(e));
}
</script>
Лучшие практики:
- Всегда указывайте MIME-тип при использовании <source>
- Для кросс-браузерности предоставляйте несколько форматов
- Используйте относительные пути для локальных ресурсов
- Проверяйте CORS-политики для внешних ресурсов
Ограничения: Некоторые мобильные браузеры ограничивают автовоспроизведение, даже если src указан корректно.
Определение поддерживаемых форматов:
const audio = document.createElement('audio');
console.log('MP3:', audio.canPlayType('audio/mpeg'));
console.log('OGG:', audio.canPlayType('audio/ogg; codecs="vorbis"'));
console.log('WAV:', audio.canPlayType('audio/wav'));
Совет: Для потокового аудио используйте специализированные технологии (WebRTC, MediaSource Extensions) вместо статичного src.
Примечание: Изменение атрибута src не начинает автоматическое воспроизведение - требуется явный вызов метода play().