MediaElementAudioSource выводит нули из-за ограничений доступа CORS

Question

У меня есть ссылка на mp3 на amazon s3 (mp3-плеер aws настроен как общедоступный) Звуковой проигрыватель отлично работает.

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

Я использую образец MDN для analyserNode в качестве основы https://developer.mozilla.org/en/docs/Web/API/AnalyserNode

<audio id="audio-player-console" src="${AWS_songUrl}" autoplay> 
    <p>Your browser does not support this audio player </p> 
</audio> 

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

Если добавить crossorigin = «анонимный» к звуковому тегу, то я ничего не получаю вообще и аудиоплеер не будет играть трек

<audio id="audio-player-console" src="${AWS_songUrl}" crossorigin="anonymous" autoplay> 
    <p>Your browser does not support this audio player </p> 
</audio> 

Моей конфигурацию AWS CORS после «гласности» была набор

<?xml version="1.0" encoding="UTF-8"?> 
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> 
<CORSRule> 
    <AllowedOrigin>*</AllowedOrigin> 
    <AllowedMethod>GET</AllowedMethod> 
    <MaxAgeSeconds>3000</MaxAgeSeconds> 
    <AllowedHeader>*</AllowedHeader> 
</CORSRule> 
</CORSConfiguration> 

Вот где я пытаюсь подключить аудио тег к audiocontext для визуализатора, который один он начинает сбиваться в CORS проверить

canvasCtx = visualizerCanvas.getContext("2d") 
audioCtx = new (window.AudioContext || window.webkitAudioContext)() 
var audioSrc = audioCtx.createMediaElementSource(aPlayer) 
var analyser = audioCtx.createAnalyser() 
audioSrc.connect(analyser) 
analyser.fftSize = 2048 
var bufferLength = analyser.frequencyBinCount 
var dataArray = new Uint8Array(bufferLength) 
analyser.getByteTimeDomainData(dataArray) 

Я просто не знаю, что я могу сделать. Я установил конфигурацию AWS для публики, разрешил все источники и все заголовки

Answer 1

В конечном итоге я понял, что делать после нескольких часов и часов исследований и экспериментов. На момент написания этой статьи было очень мало документации, показывающей, как это сделать. Я надеюсь, что люди найдут это полезным.

Понимание CORS:

CORS является аббревиатурой Cross Origin Resoruce Sharing. CORS - это новый стандарт обмена/доступа к информации между различными доменами. CORS в основном представляет собой метод использования заголовков серверов, чтобы сообщить браузеру, если ему разрешен доступ или взаимодействие с определенным файлом на другом сервере. Хотя вы можете загружать большинство вещей, не беспокоясь о CORS (например, изображениях, аудио, видео и даже других веб-страницах), взаимодействие с этими элементами требует специального разрешения от сервера. В моем случае я пытался читать частоты из аудиофайла на другом сервере. В этом случае я пытался получить доступ к информации, требующей авторизации от специальных заголовков на сервере.

Поддержка браузера очень хорошо, но, если вы поддерживаете старые браузеры, вы можете увидеть таблицы поддержки здесь (http://caniuse.com/#search=cors)

Что я сделал:

Включено использование .htaccess (Я думаю, вы можете сделать то же самое с apache2.conf или 000-default.conf, но файлы .htaccess намного проще редактировать и поддерживать). Эти файлы используются для установки заголовков и настроек для apache. Я включил файлы .htaccess, перейдя в/etc/apache2/и отредактировал apache2.conf. Убедитесь, что запись соответствует следующему:

<Directory /var/www/> 
     Options Indexes FollowSymLinks 
     AllowOverride All 
     Require all granted 
</Directory> 

Я установил заголовки в моем файле .htaccess, чтобы разрешить доступ из Codepen. Создайте файл .htaccess в том же каталоге, что и файл, который хотите разделить.Вы только хотите поделиться тем, что у вас есть, или создать угрозу безопасности. Введите это в файл .htaccess:

Header set Access-Control-Allow-Origin: "http://websiteWantingToAccessYourFile.com".

Сохраните файл. Перезапустите Apache с помощью этой команды sudo service apache2 restart. Введите пароль, если будет предложено. С аудио, я добавил атрибут crossorigin="anonymous". Подробнее о настройках CORS (crossorigin) можно узнать здесь (https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) Я полагаю, вы можете установить это с помощью запросов ajax и xhr. Различные версии apache могут иметь разные имена файлов или стандарты. Убедитесь, что это правильно для вашей версии. Я запускаю Apache 2.4.18 на моем сервере Ubuntu.

Скажите, пожалуйста, если это можно улучшить. Я потратил много времени на понимание этого, но я не эксперт. Отправьте свои вопросы или предложения в комментариях. :)