Как обойти ограничения CORS для аудиофайла при чтении аудиочастот?

Question

Я пытаюсь создать программу визуализации аудио на codepen.io (http://codepen.io/www139/pen/oLrJAZ?editors=0010). Я создал свой собственный веб-сервер, который я использовал для загрузки звука для проекта. Вы можете слушать аудио без проблем CORS (http://williamgreen.hopto.org/audioVisualization/song.mp3). Однако программа визуализации аудио требует доступа для чтения звуковых частот. Когда я пытаюсь читать звуковые частоты, мне присваивается эта ошибка:

MediaElementAudioSource outputs zeroes due to CORS access restrictions for http://williamgreen.hopto.org/audioVisualization/song.mp3

Частота возвращается как 0s.

Когда я добавляю эту строку:

audio.crossOrigin = 'anonymous'; 

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

Я также попытался установить доступ к CORS с этим заголовком в .htaccess согласно https://stackoverflow.com/a/11691776/3011082. Этот вопрос также кажется интересным, но мне не хватает необходимой информации (MediaElementAudioSource outputs zeros due to CORS access restrictions local mp3 file). Я также ссылался на это (http://enable-cors.org/server_apache.html).

Любые предложения? Есть ли какие-либо заголовки apache/PHP, которые необходимо установить? Как я могу заставить это работать?

Я задал этот вопрос некоторое время назад (How can I set CORS access for an audio file on my Linux webserver with apache2?), но я был не таким точным, как хотелось бы, и ответы не помогли мне, поэтому я задал этот вопрос. Мой мозг работал над этой головоломкой буквально в месяцах, кроме средней школы;)

Редактировать: Я задал этот вопрос, который показывает больше информации. Вопрос очень вероятен с заголовками CORS CORS headers for accessing a file on another domain

Answer 1

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

Понимание CORS:

CORS является аббревиатурой C Россом O Rigin R esoruce S Хэринга. CORS - это новый стандарт обмена/доступа к информации между различными доменами. CORS в основном представляет собой метод использования заголовков серверов, чтобы сообщить браузеру, если ему разрешен доступ или взаимодействие с определенным файлом на другом сервере. Хотя вы можете загружать большинство вещей, не беспокоясь о CORS (например, изображениях, аудио, видео и даже других веб-страницах), взаимодействие с этими элементами требует специального разрешения от сервера. В моем случае я пытался записать частоты из аудиофайла на другом сервере. В этом случае я пытался получить доступ к информации, требующей авторизации от специальных заголовков на сервере.

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

Что я сделал:

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

  <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.

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