質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

2039閲覧

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

HillTop

総合スコア22

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2019/04/14 01:03

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>

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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>

投稿2019/04/14 01:14

ockeghem

総合スコア11701

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HillTop

2019/04/14 01:47

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

2019/04/14 02:20

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

2019/04/14 02:21

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問