More than 3 years have passed since last update.

[React] [Amplify] Audioでmp3を読み込めず「DOMException: Failed to load because no supported source was found.」が発生する

Posted at 2021-09-08

はじめに

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)$)([^.]+$)/>

以上です。