はじめに
Reactで開発しているWebページ上で音楽を再生しようとしたところ
ローカル環境では再生が可能であるのに、Amplifyでホストしている開発環境でタイトルのエラーが発生して再生できませんでした。
原因を調査しましたので、備忘録として記載していきます。
事象
以下コードのように音声を再生しようとしたところ
コンソール上にエラーが表示されてしまいました。
import AudioSource from './assets/AudioSource.mp3';
~中略~
const audio = new Audio(AudioSource);
audio.play();
以下のようなエラーが発生。サポートしてないソースだからロードできないそうな。なぜ？
DOMException: Failed to load because no supported source was found.
解決策
普通にエラーメッセージでググるといかにもそれっぽいaudioやvideoタグを使用した際の内容が引っかかりますが、私には当てはまりませんでした。
私の場合はAmplifyの設定に問題がありました。
と言ってもSPAの設定時にAWS公式の以下の指定に沿って、SPAを機能させるためにリダイレクトの設定をしていただけです。
https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
ふと気になって正規表現を見てみると、「mp3」が存在しません。
構築時に何となく設定をしていただけでしたので、全く気づきませんでした。
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>
というわけで、mp3をリダイレクトの対象外に追加してあげて解決しました。
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json|mp3)$)([^.]+$)/>
以上です。