【解決方法】DOMException「サポートされているソースが見つからなかったため、ロードに失敗しました」の原因と対処法

エラーの概要

音声や動画などのメディアリソースを読み込む際に発生する「DOMException: Failed to load because no supported source was found（サポートされているソースが見つからなかったため、ロードに失敗しました）」というエラー。このエラーの主な原因の一つは、オリジン間リソース共有（CORS：Cross-Origin Resource Sharing）に関する問題です。

原因：CORSによる制限

異なるドメインからメディアファイルを読み込もうとすると、ブラウザのセキュリティ機能によってアクセスがブロックされ、このDOMExceptionが発生することがあります。

解決策1：crossOrigin属性を設定する

videoやaudio要素に対して、crossOriginを明示的に「anonymous」に設定しましょう。

video.crossOrigin = 'anonymous';

解決策2：サーバー側でHTTPヘッダーを設定する

サーバーのレスポンスに以下のヘッダーを追加することで、クロスオリジンでのリソース共有が有効になります。これにより、画像やメディアファイルがレスポンスとともにHTTPヘッダーを通過できるようになります。

Access-Control-Allow-Origin: *

解決策3：jQueryのhtml()メソッドを使う

もう一つの方法として、jQueryのhtml()メソッドを使ってaudio要素を動的に挿入することもできます。

$('#audio').html('<audio autoplay><source src="demo.mp3"></audio>');

まとめ

「サポートされているソースが見つからない」というDOMExceptionは、CORS設定を見直すことで解決できるケースがほとんどです。クライアント側のcrossOrigin属性の設定と、サーバー側のAccess-Control-Allow-Originヘッダーの設定を組み合わせることで、多くの場合この問題を回避できます。