Атрибут crossorigin тега <audio>

Описание

Атрибут crossorigin для тега <audio> определяет, как браузер должен обрабатывать запросы аудио-файлов с других доменов (CORS-запросы). Этот атрибут влияет на то, будут ли доступны данные аудио для JavaScript при кросс-доменном использовании.

Пример использования:
<audio controls crossorigin="anonymous"> <source src="https://another-domain.com/audio.mp3" type="audio/mpeg"> Ваш браузер не поддерживает аудио элемент. </audio>

Значения атрибута:

Значение Описание Отправка cookies
anonymous Запрос отправляется без учетных данных Нет
use-credentials Запрос отправляется с учетными данными Да
(отсутствует) Запрос выполняется без CORS Нет

Когда использовать:

  • Доступ к данным аудио: Когда нужно анализировать аудио через Web Audio API
  • Статистика загрузки: Для точного отслеживания прогресса загрузки
  • Ошибки CORS: При возникновении ошибок доступа к ресурсу
Пример с Web Audio API:
<audio id="audio" crossorigin="anonymous"> <source src="https://cdn.example.com/track.mp3" type="audio/mpeg"> </audio> <script> const audio = document.getElementById('audio'); const audioContext = new AudioContext(); audio.addEventListener('canplay', () => { const source = audioContext.createMediaElementSource(audio); source.connect(audioContext.destination); }); </script>

Ошибки без crossorigin:

// Без атрибута crossorigin: // SecurityError: Failed to execute 'createMediaElementSource' on 'AudioContext' // С атрибутом crossorigin="anonymous": // Работает, если сервер разрешает CORS-запросы

Требования сервера:

  • Должен отправлять заголовок Access-Control-Allow-Origin
  • Для use-credentials нужен Access-Control-Allow-Credentials: true
  • Рекомендуется использовать HTTPS

Важно: Атрибут crossorigin работает только если сервер правильно настроен для CORS-запросов.

Лучшие практики:

  • Используйте anonymous для большинства случаев
  • use-credentials только для приватного контента
  • Тестируйте на разных доменах
  • Проверяйте заголовки ответа сервера

Диагностика проблем:

fetch('https://audio-server.com/track.mp3', { method: 'HEAD', mode: 'cors', credentials: 'same-origin' }) .then(response => { console.log('CORS headers:', { 'allow-origin': response.headers.get('Access-Control-Allow-Origin'), 'allow-credentials': response.headers.get('Access-Control-Allow-Credentials') }); });

Совет: Для тестирования CORS используйте инструменты разработчика в браузере (вкладка Network).