BLOGGERで音源を使用するにあたり色々と苦戦

JavaScriptを用いたテトリス制作でコード修正に苦労したことの一つにBGM関連のものがあります。最初は<audio>とかも知らない状態でした。まずは試しということで使い方を調べて導入してみたわけですが…音が鳴らない。コードを打ち間違えたかな？と説明されているコードをコピペして貼り付けても音が鳴らないという不思議な状態。原因が分かってみれば単純なことなのですが、知識のない僕はこの時点で試行錯誤に結構時間を食いました。

要はページを開いたときに勝手に再生するのは禁止だったわけです。オーディオの自動再生はダメだよ？と決められているみたいで。言われてみればそうですよね。勝手に音が鳴る仕様だと嫌がらせとかもできてしまいますから。しかしなかなか気づけませんでした。なぜならautoplayとかいう自動再生用のプロパティが用意されていたのだから…。自分の書き方に問題があるはずだ…と無駄に試行錯誤してしまった。知識のない状態でコードをいじっているとこういうしょうもない箇所で時間をとられてしまう。ちなみに馬鹿でかいデータ量を勝手にダウンロードさせることを回避するためpreloadも禁止なようです。スマホだと容量制限ありますからね。

結局のところ音を読み込ませるためにはユーザー側でクリックなりタップなり何かアクションを起こしてもらう必要がある、と。それがわかれば万事解決…と思いきやまだまだBGM関連で苦労が待っていました。例えばレスポンシブ対応するために僕はタッチイベントを設定していたのですが、何故かtouchstartだと音源を読み込んでくれませんでした。そこでも試行錯誤に時間がかかる。結局touchendだと読み込んでくれたのでそちらで設定しました。ただ、実はタッチイベントじゃなくてクリックイベントで全部済ませることができたりします。しかもそれが一番確実で簡単だったりするという。今回は勉強も兼ねてタッチイベントを使用していましたがそれで結構苦労することになりました。他にBGM関連で苦労したことといえばBLOGGERへの導入ですね。BLOGGERでMP3を使用する方法については↓の記事を参考。

僕の知識としてはGoogleドライブってそもそも何だ？というレベル。僕には縁のない機能でしたから。とにもかくにもブログへの音源の導入方法が分かったので早速実践。そして無事に音が再生され一安心…だったのですが、しばらくしてからバグが発覚。どうもページを開いた状態で数分放置してから再生しようとすると読み込みエラーが発生するもよう。ユーザーがアクションを起こしたときにロードを開始するよう設定しておけば問題ないですが、一時停止した状態で放置されたらまたエラーが出る。そして僕はテトリスに一時停止機能を設置している…。ということで試行錯誤。エラーをキャッチするためプロミスやらtry-catchやら色々やってみましたが…断念。どうやってもキャッチできない。エラーが発生するのが再生を開始した瞬間じゃないのが面倒なところですね。解決するには深い知識が必要そうな気がする。結局errorイベント時に再ロードするように設定することで妥協しました。コンソールにエラーが表示されないようにしたかった…。知識が増えたらまた考えることにしよう。