【ポモドーロタイマーを作ろうVanillaJS編⑧】～GitHub Pagesでのエラー修正～
前回で一旦完成したポモドーロタイマーですが
GitHub Pagesで公開したところ、効果音が発生するタイミングで
次のようなエラーが出てしまいました。
①「ファイルが見つかりません」という内容のエラー
※エラー内容をメモしておくのを忘れてしまいました....
②Uncaught (in promise) DOMException: Failed to load because no supported source was found.
今回は①と②に対してどのように対応したかを説明していきます。
①：音源ファイルパスの変更：ローカル相対パス→絶対パス
①についてはこちらの記事を参考に、ファイルパスを変更することで解決できました。
リポジトリごとの GitHub Pages でルート相対パスを使うには - Corredor
ローカル環境で開発していた際は、相対パスで記述しており
問題なく効果音が再生されておりました。
ただ、Github Pagesに上げた場合ルートが変わってしまう仕様のようで
そのままの相対パスではうまく動作しません。
相対パスだとややこしくなりそうだったので
今回は分かりやすく絶対パスで記述することにしました。
音源ファイルは既にGitHubにアップロードされているので
絶対パスはこのようになると思います。
https://{ユーザー名}.github.io/{リポジトリ名}/assets/audio/○○.mp3
※assets以下はファイル構成に応じて変更してください
②：play()メソッドはPromiseを返す。そしてブラウザサポートの有無を確認しよう。
②については、エラーと共にコンソールに
下記のULRが記載されていたので確認してみました。
すると、以下のような書き方が推奨されていました。
const playPromise = audio.play();
if(playPromise !== undefined) {
playPromise.then(_ => {
})
.catch(error => {
console.log(error);
});
}コードの意味としては
if(playPromise !== undefined)
この部分で、ブラウザがサポートしているか否かを確認し
サポートしていない場合は処理をしないようにしています。
playPromise.then(_ => {
})
.catch(error => {
console.log(error);
});
この部分では、play()メソッドがPromiseを返すので
再生が成功したか失敗したかを確認しています。
これでエラーはなくなりました。
ご丁寧にconsoleにURLを載せて頂いて....
勉強になります。
今回は以上になります！
↓↓私の師匠、もりけんさんの武骨日記。問題集、要チェック
