MediaElementAudioSourceはCORSアクセス制限のため0を出力します

Question

私はamazon s3のmp3へのリンクを持っています（aws mp3はpublicに設定されています） オーディオプレーヤーはうまく動作します。

しかし、ビジュアライザを作成しようとすると、オーディオプレーヤに接続するとすぐにCORSエラーが発生します。なぜこれがそうでなければならないのか分かりません。私は明確にするための基礎として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> 

をMDNのサンプルを使用している

は、あまりにも長い間analyserdataのために接続する試みとして、audioplayerは問題なくトラックを実行します。

私が追加した場合crossorigin =「匿名」私はまったく何を取得し、オーディオプレーヤーは、「公開する」の後に私のAWS CORSの設定がされてい

トラック

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

を再生されません、オーディオタグに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、オーディオタグを接続しようとどこで設定

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は、クロスオリジンResoruce共有のための頭字語です。 CORSは、異なるドメイン間で情報を共有/アクセスするための新しい標準です。 CORSは基本的に、サーバーヘッダーを使用して、別のサーバー上の特定のファイルにアクセスまたは相互作用することが許可されているかどうかをブラウザーに通知する方法です。 CORS（画像、オーディオ、ビデオ、さらには他のWebページなど）を気にせずにほとんどのものを読み込むことができますが、これらの要素とのやり取りにはサーバからの特別な許可が必要です。私の場合は、別のサーバーのオーディオファイルから周波数を読み取ろうとしていました。この例では、サーバー上の特別なヘッダーからの承認が必要な情報にアクセスしようとしていました。私が何をしたか

ブラウザのサポートは非​​常に良いですが、あなたは古いブラウザをサポートしている場合は、ここでのサポート表を参照してくださいすることができます（http://caniuse.com/#search=cors）

：

は（.htaccessファイルの使用を有効私はあなたがapache2.confまたは000-default.confで同じことを達成できると思いますが、.htaccessファイルは編集や保守がずっと簡単です）。これらのファイルは、Apacheのヘッダーと設定を設定するために使用されます。私は/ etc/apache2 /に行って.htaccessファイルの使用を有効にし、apache2.confを編集しました。

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

私はCodepenからのアクセスを許可するように私の.htaccessファイルのヘッダーを設定します。あなたのエントリは次のように一致していることを確認します。共有するファイルと同じディレクトリに.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のバージョンが異なると、ファイル名や標準が異なる場合があります。あなたのバージョンにこれが正しいことを確認してください。私は私のUbuntuサーバーでApache 2.4.18を実行しています。

これを改善できるかどうか教えてください。私はこれを理解するのに多くの時間を費やしましたが、私は専門家ではありません。コメントに質問や提案を投稿してください。 :)