audioタグでcrossorigin属性をつけたのにクロスオリジン制約で再生できない

Question

Webサイトを作成しており、BGMを再生したいと思っております。
DropBoxに配置したmp3ファイルへの直リンクをaudioタグのsrc属性に指定してみたところ、

blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

という警告がコンソールに出ました。
調べてみたところ、audioタグやcanvasタグならcrossorigin属性を付与することでこれを回避できるとのこと。

<audio controls autoplay crossorigin="anonymous" src="https://www.dropbox.com/s/sbw9hfghk4pqqiw/Laughter.mp3?dl=1"></audio>

フォーラムで解決済みになっていた上記コードをとりあえず動かしてみたのですが、クロスオリジン制約によって阻まれてしまいました。

現在でも使える何かしらの方法はないものでしょうか。

Answer 1

crossorigin属性をつけると、オーディオ側でAccess-Control-Allow-Origin ヘッダがないと再生されなくなります。再生するだけであれば、crossoringヘッダは不要です。試みに、提示されたコードからcrossorigin属性を削除したところ、Windows 10上のGoogle Chromeで再生できました。

<audio controls autoplay src="https://www.dropbox.com/s/sbw9hfghk4pqqiw/Laughter.mp3?dl=1"></audio>

Comments

[HillTop]

ありがとうございます。
こちらでもその方法で再生できることが確認できました。
自分のdropbox上のファイルのURLだと再生できないので、どうやらURLの作り方の問題だと思いました。
この先はdropboxの使い方の問題だと思うので、試行錯誤を繰り返してみようと思います。
ありがとうございました。

[ockeghem]

dropboxはデフォルトでは公開状態でないので、まず公開設定になっているかどうかを確認するとよいと思います。例えば、普段と違うブラウザで、Dropboxにログインしていないことを確認して、そのファイルが閲覧できるか確認するとよいと思います

[HillTop]

DropBoxの「共有」の「リンク」を作成し、このURLが使えることがわかりました。
このURLは末尾が「?dl=0」になっているんですが、これを「?dl=1」に変換して、src属性に設定してあげると再生できました。
本問題は解決いたしました。
ありがとうございました。