Тег audio в HTML

Введение

Тег audio в HTML5 стал стандартным способом встраивать звук на веб‑страницы без использования плагинов вроде Flash. С его помощью вы можете добавить подкаст, фоновую музыку, звуковые эффекты или уведомления. При этом можно как показывать пользователю полноценный плеер, так и управлять воспроизведением полностью через JavaScript.

Смотрите, я покажу вам, как шаг за шагом настроить <audio> так, чтобы:

• аудио корректно загружалось во всех современных браузерах
• пользователь видел понятный интерфейс плеера
• звук можно было контролировать программно
• проигрывание не ломалось при ошибках и медленном соединении

Давайте начнем с базового синтаксиса и постепенно перейдем к более продвинутым возможностям.

Базовый синтаксис тега audio

Минимальный пример

Самый простой вариант использования тега audio выглядит так:

<audio src="audio/song.mp3"></audio>

Но такой код почти никогда не используют в реальных проектах. Смотрите почему:

• пользователь не увидит управления плеером
• нет запасных форматов на случай, если браузер не поддерживает MP3
• нет текстовой заглушки, если браузер вообще не умеет работать с audio

Чуть более практичный базовый вариант:

<audio controls>
  <!-- Основной источник аудио в формате MP3 -->
  <source src="audio/song.mp3" type="audio/mpeg">
  <!-- Запасной источник в формате Ogg -->
  <source src="audio/song.ogg" type="audio/ogg">
  <!-- Текст, который увидит пользователь, если браузер не поддерживает audio -->
  Ваш браузер не поддерживает воспроизведение аудио
</audio>

Комментарии в примере показывают, что именно здесь происходит:

• атрибут controls говорит браузеру отрисовать стандартный блок управления
• теги source позволяют указать несколько форматов одного и того же аудио
• текст внутри audio отображается только если браузер не понимает сам тег

Атрибуты тега audio

Перечислю ключевые атрибуты тега audio, с которыми вы чаще всего будете работать:

• src — путь к аудиофайлу (используется, если вы не применяете вложенные source)
• controls — отображает стандартные элементы управления (кнопка play, ползунок и т д)
• autoplay — пытается запустить аудио автоматически
• loop — зацикливает воспроизведение
• muted — делает аудио изначально выключенным
• preload — управляет предварительной загрузкой
• controlslist — позволяет ограничивать элементы управления (поддержка зависит от браузера)
• crossOrigin — задает политику CORS при запросе звука

Давайте разберем их подробнее на примерах.

Основные атрибуты и их использование

Атрибут src и использование source

У тега audio есть два способа указать файл:

1. напрямую через атрибут src
2. через вложенные теги source

Вариант 1 — простой src

<audio controls src="audio/notification.mp3">
  Ваш браузер не поддерживает тег audio
</audio>

Это удобный вариант, когда:

• вы уверены в поддержке формата (например, внутреннее приложение с контролируемым окружением)
• вам не нужно указывать несколько форматов одного и того же звука

Вариант 2 — несколько source

Когда важно кроссбраузерное воспроизведение, лучше использовать source:

<audio controls>
  <!-- Сначала указываем наиболее предпочтительный формат -->
  <source src="audio/music.webm" type="audio/webm">
  <source src="audio/music.ogg" type="audio/ogg">
  <source src="audio/music.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает воспроизведение аудио
</audio>

Как видите, браузер идет по списку сверху вниз:

• проверяет, поддерживает ли формат из type
• если да, использует первый подходящий source
• остальные строки игнорируются

Важно: порядок имеет значение. Ставьте самый современный и эффективный формат выше, а самый совместимый — ниже.

Атрибут controls

Без controls пользователь не увидит ни кнопки play, ни регулятора громкости.

<audio controls>
  <source src="audio/podcast.mp3" type="audio/mpeg">
</audio>

Если убрать controls:

<audio>
  <source src="audio/podcast.mp3" type="audio/mpeg">
</audio>

то звук не заиграет сам по себе. Его можно будет запустить только программно через JavaScript, например, как фоновое уведомление.

Атрибут autoplay и ограничения браузеров

Автовоспроизведение выглядит привлекательно, но современные браузеры сильно его ограничивают.

Пример базовой разметки:

<audio controls autoplay>
  <source src="audio/intro.mp3" type="audio/mpeg">
</audio>

Однако во многих браузерах такое аудио не начнет играть само, пока пользователь не выполнит какое‑то действие (клик, скролл, нажатие клавиши). Это сделано для того, чтобы страницы не начинали внезапно воспроизводить звук без согласия.

Чтобы повысить шанс успешного автозапуска, часто используют комбинацию autoplay и muted:

<audio autoplay muted loop>
  <!-- Здесь, например, короткий фоновый звук без критической важности -->
  <source src="audio/ambient.mp3" type="audio/mpeg">
</audio>

• muted позволяет браузеру автоматически запустить звук без звука
• дальше через JavaScript вы можете включить громкость по действию пользователя

Атрибут loop

Если вы хотите зациклить звук (например, фоновую мелодию), можно просто добавить loop:

<audio controls loop>
  <source src="audio/ambient.mp3" type="audio/mpeg">
</audio>

Браузер будет автоматически возвращаться в начало файла после достижения конца.

Атрибут muted

muted задает начальное состояние громкости.

<audio controls muted>
  <source src="audio/video-intro.mp3" type="audio/mpeg">
</audio>

Здесь звук будет воспроизводиться, но начнет с нулевой громкости. Пользователь сможет поднять громкость с помощью регулятора.

muted особенно полезен, когда вы хотите:

• обойти ограничения на autoplay
• показывать «тихий» плеер, который пользователь включает по желанию

Атрибут preload

preload управляет тем, сколько данных аудио браузер может загружать заранее:

• none — ничего не загружать до явного старта воспроизведения
• metadata — загрузить только метаданные (длительность и т п)
• auto — браузер сам решает, сколько информации подгружать (по умолчанию)

Пример с комментариями:

<audio controls preload="none">
  <!-- Ничего не загружается, пока пользователь не нажмет Play -->
  <source src="audio/big-file.mp3" type="audio/mpeg">
</audio>

<audio controls preload="metadata">
  <!-- Загружается только информация о треке - например длительность -->
  <source src="audio/lecture.mp3" type="audio/mpeg">
</audio>

<audio controls preload="auto">
  <!-- Браузер сам решает - иногда загружает файл полностью заранее -->
  <source src="audio/short-track.mp3" type="audio/mpeg">
</audio>

Рекомендация: для больших файлов (подкасты, лекции) лучше использовать metadata или none, чтобы не тратить трафик до реальной необходимости.

Атрибут controlslist

Этот атрибут позволяет скрывать некоторые элементы интерфейса плеера. Поддержка частичная, лучше тестировать в нужных браузерах.

Пример:

<audio controls controlslist="nodownload noplaybackrate">
  <!-- nodownload - скрывает кнопку загрузки если она есть у браузера -->
  <!-- noplaybackrate - может скрыть управление скоростью воспроизведения -->
  <source src="audio/podcast.mp3" type="audio/mpeg">
</audio>

Учтите, что это не защита контента. Пользователь все еще может получить файл другими способами (через DevTools, сетевые запросы и т д).

Поддерживаемые форматы аудио

Основные форматы

На практике чаще всего встречаются:

• MP3 — наиболее распространенный формат с хорошей совместимостью
• Ogg Vorbis — открытый формат, хорошо поддерживается в большинстве браузеров
• AAC / M4A — часто используется на мобильных устройствах и в потоковом аудио
• WebM Audio (Opus) — современный и эффективный формат, поддерживается новыми браузерами

Давайте посмотрим пример разметки с несколькими форматами:

<audio controls>
  <!-- Современный формат - если браузер его поддерживает -->
  <source src="audio/track.webm" type="audio/webm">
  <!-- Открытый формат Ogg -->
  <source src="audio/track.ogg" type="audio/ogg">
  <!-- Самый совместимый вариант - MP3 -->
  <source src="audio/track.mp3" type="audio/mpeg">
  Ваш браузер не поддерживает воспроизведение аудио
</audio>

Как проверить поддержку формата через JavaScript

Иногда полезно заранее узнать, какие форматы поддерживает браузер, чтобы, например, подгружать нужный файл с сервера.

<script>
// Здесь мы создаем временный элемент audio
var audio = document.createElement('audio');

// Проверяем поддержку формата Ogg
var canOgg = audio.canPlayType('audio/ogg');
// Проверяем поддержку формата MP3
var canMp3 = audio.canPlayType('audio/mpeg');

// Выводим результат в консоль для наглядности
console.log('Поддержка Ogg', canOgg);   // может быть "probably" "maybe" или пустая строка
console.log('Поддержка MP3', canMp3);
</script>

Метод canPlayType возвращает строку:

• "probably" — браузер скорее всего умеет корректно проигрывать этот формат
• "maybe" — браузер не уверен, но попробует
• пустая строка — формат не поддерживается

Управление воспроизведением через JavaScript

Покажу вам, как управлять тэгом audio из JavaScript. Это понадобится, если вам нужно:

• запускать звук по кнопке, которая не связана напрямую с плеером
• показывать кастомный интерфейс
• реагировать на события (конец трека, пауза и т д)

Получение элемента и базовые методы

У тега audio есть набор стандартных методов и свойств, унаследованных от HTMLMediaElement: play, pause, currentTime, volume и другие.

Пример разметки:

<audio id="player">
  <source src="audio/music.mp3" type="audio/mpeg">
</audio>

<button id="playBtn">Play</button>
<button id="pauseBtn">Pause</button>
<button id="stopBtn">Stop</button>

<script>
// Получаем ссылку на элемент audio
var audio = document.getElementById('player');

// Получаем ссылки на кнопки управления
var playBtn = document.getElementById('playBtn');
var pauseBtn = document.getElementById('pauseBtn');
var stopBtn = document.getElementById('stopBtn');

// Навешиваем обработчик на кнопку Play
playBtn.addEventListener('click', function () {
  // Метод play запускает воспроизведение
  audio.play();
});

// Навешиваем обработчик на кнопку Pause
pauseBtn.addEventListener('click', function () {
  // Метод pause ставит воспроизведение на паузу
  audio.pause();
});

// Навешиваем обработчик на кнопку Stop
stopBtn.addEventListener('click', function () {
  // Сначала ставим на паузу
  audio.pause();
  // Затем возвращаемся в начало трека
  audio.currentTime = 0;
});
</script>

Здесь вы видите базовый набор действий:

• запуск play
• пауза pause
• остановка через комбинацию pause и сброс текущего времени

Управление громкостью и беззвучным режимом

У элемента audio есть свойство volume (от 0 до 1) и свойство muted (логическое).

Давайте разберемся на примере:

<audio id="player2" controls>
  <source src="audio/music.mp3" type="audio/mpeg">
</audio>

<button id="volUp">Громче</button>
<button id="volDown">Тише</button>
<button id="toggleMute">Вкл / выкл звук</button>

<script>
var audio2 = document.getElementById('player2');

document.getElementById('volUp').addEventListener('click', function () {
  // Увеличиваем громкость на 0.1
  audio2.volume = Math.min(audio2.volume + 0.1, 1);
});

document.getElementById('volDown').addEventListener('click', function () {
  // Уменьшаем громкость на 0.1
  audio2.volume = Math.max(audio2.volume - 0.1, 0);
});

document.getElementById('toggleMute').addEventListener('click', function () {
  // Инвертируем значение muted
  audio2.muted = !audio2.muted;
});
</script>

Комментарии в коде показывают, что:

• volume — число от 0 до 1, поэтому разумно использовать Math.min и Math.max
• muted — булево значение, которое удобно переключать через инверсию

Перемотка и прогресс

Для перемотки нам нужны:

• currentTime — текущее положение в секундах
• duration — общая длительность трека в секундах

Пример с простым ползунком:

<audio id="player3">
  <source src="audio/lecture.mp3" type="audio/mpeg">
</audio>

<input type="range" id="seek" min="0" max="100" value="0">
<button id="playLecture">Play</button>

<script>
var audio3 = document.getElementById('player3');
var seek = document.getElementById('seek');
var playLecture = document.getElementById('playLecture');

// Запускаем воспроизведение по кнопке
playLecture.addEventListener('click', function () {
  audio3.play();
});

// Обновляем положение ползунка во время воспроизведения
audio3.addEventListener('timeupdate', function () {
  // Проверяем что длительность известна
  if (audio3.duration) {
    // Вычисляем процент проигранного времени
    var progress = (audio3.currentTime / audio3.duration) * 100;
    seek.value = progress;
  }
});

// Реагируем на изменение ползунка пользователем
seek.addEventListener('input', function () {
  // Переводим процент обратно во время
  if (audio3.duration) {
    audio3.currentTime = (seek.value / 100) * audio3.duration;
  }
});
</script>

Теперь вы увидите, как ползунок движется вместе с воспроизведением, а пользователь может перетаскивать его для перемотки.

Обработка основных событий audio

У тега audio есть целый набор событий: play, pause, ended, timeupdate, loadedmetadata и другие. Они помогают вам реагировать на разные стадии жизни аудио.

Пример:

<audio id="player4">
  <source src="audio/song.mp3" type="audio/mpeg">
</audio>

<script>
var audio4 = document.getElementById('player4');

// Событие, когда воспроизведение началось
audio4.addEventListener('play', function () {
  console.log('Аудио началось');
});

// Событие, когда воспроизведение поставлено на паузу
audio4.addEventListener('pause', function () {
  console.log('Аудио на паузе');
});

// Событие, когда трек закончился
audio4.addEventListener('ended', function () {
  console.log('Аудио закончилось');
});

// Событие, когда стали известны метаданные (например длительность)
audio4.addEventListener('loadedmetadata', function () {
  console.log('Длительность трека', audio4.duration);
});
</script>

Такие обработчики позволяют:

• обновлять интерфейс в нужные моменты
• запускать следующий трек после окончания текущего
• показывать общую длительность лишь тогда, когда она точно известна

Кастомные аудиоплееры

Зачем вообще делать свой плеер

Стандартный controls полезен, но имеет ограничения:

• его внешний вид сильно зависит от браузера и платформы
• не всегда легко стилизовать под дизайн проекта
• иногда вам нужны дополнительные элементы (например, кнопка «Скачать» или плейлист)

Поэтому часто делают свой интерфейс поверх audio. Смотрите, я покажу вам базовый подход.

Простой кастомный плеер с CSS и JS

Разметка:

<div class="player">
  <!-- Реальный элемент audio без стандартных controls -->
  <audio id="customAudio">
    <source src="audio/song.mp3" type="audio/mpeg">
  </audio>

  <!-- Кастомные элементы управления -->
  <button id="customPlay">Play</button>
  <button id="customPause">Pause</button>

  <span id="timeCurrent">0:00</span>
  /
  <span id="timeTotal">0:00</span>

  <input type="range" id="customSeek" min="0" max="100" value="0">
</div>

<script>
var customAudio = document.getElementById('customAudio');
var customPlay = document.getElementById('customPlay');
var customPause = document.getElementById('customPause');
var timeCurrent = document.getElementById('timeCurrent');
var timeTotal = document.getElementById('timeTotal');
var customSeek = document.getElementById('customSeek');

// Функция форматирования секунд в вид "м:сс"
function formatTime(seconds) {
  // Округляем до целых
  var sec = Math.floor(seconds);
  var min = Math.floor(sec / 60);
  var remainSec = sec % 60;
  // Добавляем ведущий ноль для секунд меньше 10
  if (remainSec < 10) remainSec = '0' + remainSec;
  return min + ':' + remainSec;
}

// Когда загрузились метаданные - знаем общую длительность
customAudio.addEventListener('loadedmetadata', function () {
  timeTotal.textContent = formatTime(customAudio.duration);
});

// Обновляем текущее время и положение ползунка во время проигрывания
customAudio.addEventListener('timeupdate', function () {
  timeCurrent.textContent = formatTime(customAudio.currentTime);
  if (customAudio.duration) {
    customSeek.value = (customAudio.currentTime / customAudio.duration) * 100;
  }
});

// Реакция на кнопку Play
customPlay.addEventListener('click', function () {
  customAudio.play();
});

// Реакция на кнопку Pause
customPause.addEventListener('click', function () {
  customAudio.pause();
});

// Перемотка при изменении ползунка
customSeek.addEventListener('input', function () {
  if (customAudio.duration) {
    customAudio.currentTime = (customSeek.value / 100) * customAudio.duration;
  }
});
</script>

Как видите, логика похожа на примеры выше, но теперь вы сами определяете:

• какие элементы есть в интерфейсе
• как они выглядят (через CSS)
• как именно они управляют audio

Работа с несколькими треками и плейлистами

Простейший плейлист на массиве файлов

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

<audio id="playlistPlayer">
  <source id="playlistSource" src="audio/track1.mp3" type="audio/mpeg">
</audio>

<button id="prevTrack">Предыдущий</button>
<button id="nextTrack">Следующий</button>

<script>
// Массив с путями к аудиофайлам
var tracks = [
  'audio/track1.mp3',
  'audio/track2.mp3',
  'audio/track3.mp3'
];

// Текущий индекс трека
var currentIndex = 0;

var playlistPlayer = document.getElementById('playlistPlayer');
var playlistSource = document.getElementById('playlistSource');

var prevBtn = document.getElementById('prevTrack');
var nextBtn = document.getElementById('nextTrack');

// Функция для переключения трека
function loadTrack(index) {
  // Обновляем индекс в пределах массива
  currentIndex = (index + tracks.length) % tracks.length;
  // Меняем src у source
  playlistSource.src = tracks[currentIndex];
  // Перезагружаем элемент audio
  playlistPlayer.load();
  // Запускаем воспроизведение
  playlistPlayer.play();
}

// Навешиваем обработчик на кнопку "Следующий"
nextBtn.addEventListener('click', function () {
  loadTrack(currentIndex + 1);
});

// Навешиваем обработчик на кнопку "Предыдущий"
prevBtn.addEventListener('click', function () {
  loadTrack(currentIndex - 1);
});

// Автоматически переключаемся на следующий трек по окончании
playlistPlayer.addEventListener('ended', function () {
  loadTrack(currentIndex + 1);
});
</script>

Здесь вы видите основы:

• хранение путей в массиве
• смена src и вызов load для обновления источника
• переключение треков по событиям ended и по кнопкам

Особенности автозапуска и взаимодействия с пользователем

Ограничения autoplay и как с ними работать

Многие разработчики сталкиваются с ситуацией, когда autoplay не работает, хотя атрибут указан. Причина в политике браузеров: они блокируют автозапуск «громкого» контента без явного действия пользователя.

Распространенные подходы:

1. Запускать аудио только по действию пользователя

<button id="startAudio">Запустить</button>
<audio id="autoAudio">
  <source src="audio/theme.mp3" type="audio/mpeg">
</audio>

<script>
var startBtn = document.getElementById('startAudio');
var autoAudio = document.getElementById('autoAudio');

startBtn.addEventListener('click', function () {
  // Вызов play в обработчике клика обычно разрешен браузером
  autoAudio.play();
});
</script>

2. Использовать muted + autoplay для «немого» старта, а затем включать звук

<audio id="bgAudio" autoplay muted loop>
  <source src="audio/background.mp3" type="audio/mpeg">
</audio>

<button id="enableSound">Включить звук</button>

<script>
var bgAudio = document.getElementById('bgAudio');
var enableSound = document.getElementById('enableSound');

enableSound.addEventListener('click', function () {
  // Снимаем mute по действию пользователя
  bgAudio.muted = false;
});
</script>

Второй подход хорошо подходит для фона, который не критичен, если не заиграет.

Оптимизация загрузки и производительности

Выбор preload в реальных задачах

Подумайте, как пользователь будет взаимодействовать с аудио:

• если на странице много треков, а слушать будут 1‑2 — preload="none" или metadata
• если один короткий звук, который почти точно понадобиться — preload="auto"

Пример «списка подкастов», где не нужно загружать все файлы заранее:

<audio controls preload="none">
  <source src="audio/episode1.mp3" type="audio/mpeg">
</audio>

<audio controls preload="none">
  <source src="audio/episode2.mp3" type="audio/mpeg">
</audio>

Так вы не перегружаете сеть, пока пользователь не нажмет Play.

Кеширование и повторное использование

Если один и тот же файл используется много раз (например, звук уведомления), разумно:

• держать один элемент audio в памяти
• воспроизводить его повторно по событию

<audio id="notifySound" preload="auto">
  <source src="audio/notify.mp3" type="audio/mpeg">
</audio>

<button id="newMessage">Новое сообщение</button>

<script>
var notifySound = document.getElementById('notifySound');
var newMessage = document.getElementById('newMessage');

newMessage.addEventListener('click', function () {
  // Возвращаемся в начало на случай предыдущего проигрывания
  notifySound.currentTime = 0;
  notifySound.play();
});
</script>

Так вы избежите лишних запросов и ускорите реакцию интерфейса.

Доступность и UX при работе с audio

Текстовые альтернативы и субтитры

Хотя сам тег audio не поддерживает встроенные субтитры так же удобно, как video, вы можете:

• добавлять расшифровку аудио текстом рядом
• предоставлять ссылку на текстовую версию

<figure>
  <audio controls>
    <source src="audio/podcast.mp3" type="audio/mpeg">
    Ваш браузер не поддерживает аудио
  </audio>
  <figcaption>
    Подкаст выпуск 1
    <a href="podcast-1-transcript.html">Текстовая расшифровка</a>
  </figcaption>
</figure>

Управление с клавиатуры

Стандартный controls уже доступен для клавиатуры, но если вы делаете кастомный плеер, важно:

• использовать кнопки <button>
• не забывать про атрибуты aria (например, aria-label) при необходимости
• обеспечивать фокусируемость элементов

Пример:

<button id="customPlay2" aria-label="Воспроизвести">Play</button>

Так вы помогаете экранным читалкам правильно озвучивать элементы.

Разбор типичных ошибок

Отсутствие type у source

Многие разработчики опускают type, а затем удивляются некорректному выбору источника в некоторых браузерах.

Неполный вариант:

<audio controls>
  <source src="audio/music.ogg">
  <source src="audio/music.mp3">
</audio>

Лучше явно указать тип:

<audio controls>
  <source src="audio/music.ogg" type="audio/ogg">
  <source src="audio/music.mp3" type="audio/mpeg">
</audio>

Это упрощает браузеру задачу выбора подходящего источника.

Смешивание src и source

Технически можно одновременно указать src у audio и вложенные source, но это лишь добавляет потенциальную путаницу. Браузеры обычно будут использовать source, игнорируя src.

Чтобы не создавать неопределенности, придерживайтесь одного подхода:

• либо только src
• либо только source

Игнорирование ошибок загрузки

Иногда файл не удается загрузить: неверный путь, проблемы сети, блокировка CORS. Без обработки ошибок пользователь просто видит «молчащий» плеер.

Вы можете реагировать на событие error:

<audio id="errorAudio" controls>
  <source src="audio/missing.mp3" type="audio/mpeg">
</audio>

<script>
var errorAudio = document.getElementById('errorAudio');

errorAudio.addEventListener('error', function () {
  console.error('Ошибка загрузки аудио');
  // Здесь можно показать пользователю уведомление
  // или предложить альтернативный источник
});
</script>

Так вы хотя бы получите информацию о проблеме и сможете вывести понятное сообщение.

Заключение

Тег audio в HTML5 дает вам удобный и стандартный способ работать со звуком в веб‑приложениях. Вы можете:

• подключать несколько форматов через source
• управлять загрузкой с помощью preload
• контролировать воспроизведение через JavaScript
• создавать кастомные плееры и плейлисты
• учитывать ограничения браузеров на autoplay

Ключевая идея: относиться к audio как к медиа‑объекту с хорошо определенными свойствами и событиями. Тогда вы сможете спокойно комбинировать встроенный интерфейс браузера и свою логику, обеспечивая и удобство для пользователя, и достаточный контроль для разработчика.

Частозадаваемые технические вопросы по теме и ответы

Как сделать так чтобы звук проигрывался несколько раз одновременно например при быстрых кликах

Создайте несколько экземпляров Audio вместо повторного использования одного:

// Функция создает новый объект Audio при каждом вызове
function playShot() {
  var audio = new Audio('audio/shot.mp3'); // Загружаем звук
  audio.play(); // Проигрываем независимо от других
}

Так каждый звук играет параллельно и не обрывает предыдущий.

Как изменить скорость воспроизведения аудио

Используйте свойство playbackRate:

var audio = document.getElementById('player');
// Устанавливаем скорость в полтора раза быстрее
audio.playbackRate = 1.5;
// Возвращаем обычную скорость
audio.playbackRate = 1.0;

Диапазон обычно от 0.5 до 2.0, но проверяйте реакцию браузера и качество звука.

Как воспроизвести аудио только первый раз пока пользователь на сайте и не повторять при следующих заходах

Сохраните флаг в localStorage:

var heard = localStorage.getItem('introPlayed');
var audio = document.getElementById('introAudio');

if (!heard) {
  audio.play(); // Играть только если еще не играли
  localStorage.setItem('introPlayed', '1'); // Помечаем как проигранное
}

Так аудио запустится один раз на конкретном устройстве и браузере.

Как узнать когда аудио полностью загрузилось

Используйте событие canplaythrough:

var audio = document.getElementById('player');

audio.addEventListener('canplaythrough', function () {
  console.log('Можно воспроизводить до конца без остановок');
});

Это полезно для показа индикатора готовности или скрытия спиннера загрузки.

Как динамически поменять файл аудио без перезагрузки страницы

Обновите src и вызовите load:

var audio = document.getElementById('player');

// Функция подменяет трек
function changeTrack(path) {
  audio.src = path; // Новый путь к файлу
  audio.load();     // Перезагружаем источник
  audio.play();     // При необходимости запускаем
}

Так можно переключать треки в плейлисте или по любому событию.