Javascriptでaudioを再生する時にplay()するだけでは駄目だった件

2019年5月7日

Javascript テクノロジー プログラミング

仕事でブラウザゲームを作っているのですが、ゲームと言えばサウンドは欠かせません。 サウンドの無いゲームなんて、「餡の入っていないアンパン」、「黄身のついていない目玉焼き」、「ドラえもんのいなくなったのび太」のような感じです。 味気ないですし、寂しいですよね。音ってやっぱり偉大です。 そんな重要な音はゲームにおいてはBGMから操作音や効果を視覚と同時に聴覚に訴えるSEやジングルなど、たくさんの種類を用意しないといけないのですが、ゲームで使う時の音声データの扱いについて、分かったことがあったので、お困りの方に読んでもらえると幸いです。

ゲームにおけるサウンドの役割

BGMは、表示しているシーンでずっと鳴り続ける音楽で、プレステでは、CD再生するのがステータスでした。 スマートフォンアプリなどは、端末に入っている音源を再生することも可能ですが、ブラウザアプリでは、ページ読み込みの時に音源をページ内に読み込んでおいて、それを再生するのが一般的でしょう。 シーンの切り替わりなどでは、ajaxを使って音声データを取り込んでもいいし、タグをappendするだけでも、簡単に読み込むことができます。 一方、効果音に関しても、事前にページに読み込まれた音源を再生するというのは同じなのですが、効果音は操作ボタンのクリック音から、ゲーム内部の何かしらの反応音など、多数あり、それらが、順位不同、重複再生させる必要があります。

audioタグ

そんなわけでインターネットブラウザで表示されているホームページで音を出すためには「audio」タグを利用します。 audioタグで読み込んだデータは、 以下のようにして再生することが可能です。 <audio id="audioElement" src="sound.mp3"></audio> <button id="audioPlay"></button> <script> document.getElementById("audioPlay").onclick = function(){ document.getElementById("audioElement").play(); }; </script> このサンプルを実行すると分かるのですが、ゲームのボタンクリックをするときのような軽快な感覚で音が再生されないことに気が付きます。 audioタグの特性として、1つの音源を重複して再生することができません。 そのため、音源を一度再生すると、最後まで再生し終わるまで次の再生を開始できないのですね。 1秒の音源だとしたら、1秒の感覚をあけないと連続再生ができないという事になります。

サウンド連続再生のコツ

シューティングゲームのような非常に早いタイミングでクリック音を実現するにはどうすればいいでしょう? まず考えたのは、再生する直前に現在再生されている音源を停止してから再生すればいいと考えて以下のようにしてみました。 audioELement.pause(); audioElement.play(); でも、このやり方では、うまく機能できません。 pause()機能は、再生を停止しますが、タイムラインは保持したままになります。 再度play()しても、再生が完了するまでは次の再生になりません。 この解決方法は意外と簡単で、以下のようにすることですばやくボタンをクリックする連続再生に対応することができました。 audioElement.currentTime = 0; audioElement.play(); 文字通り、currentTimeに0をセットすることで、再生している音源のタイムラインを先頭に持ってきて強制的にはじめから再生できるようになります。 連打すると、クリック音がタイミングよく聞こえて、ゲームをやっている感覚になれますね。

連続再生と重複再生

ボタンクリックのような音は、連打すると重複再生しているように感じますが、単に連続再生しているだけで、音源を途中でぶった切っても全く問題ないという事がわかりました。 重複再生は、BGMを流しながら、SEを再生するような状態ですが、1つの音源を重複再生させたければ、状況に応じてaudioタグを追記してその個数分重複させるしか無さそうです。 これまでのほほんとゲームしていましたが、ゲームの中のサウンド効果は、意外と知らないことばかりで演ること全てが勉強になります。 ちなみに、こうした効果音をネットでフリー素材として提供しているいいサイトがあったので、合わせてご紹介させてもらいます。 http://www.kurage-kosho.info/ くらげ工匠 : 量は他に比べると少ないですが、クオリティはお気に入りです。 https://pocket-se.info/ ポケットサウンド : 種類が豊富で効果音などのコレというのが見つけやすいです。 https://soundeffect-lab.info/ 効果音ラボ : ゲーム効果音を探している時にかゆいところに手が届くような感じで、ドンピシャの効果音がけっこうあります。 http://www.skipmore.com/sound/ bitサウンド工房 : ゲーム音楽でファミコン風のサウンドを提供しています。センスが良くて気に入りました。 ゲーム制作ってやっぱり技術ポイントが多くて制作していて勉強になることばかりです。 ゲーム制作という仕事は決して遊んでいるわけではないことを、ゲーム制作を知らない人に対して知ってもらいたい・・・

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。