ブラウザゲームを作ってみよう(その13:サンプルゲーム作成その6)

はじめに

その12ではランキングの追加を行いました。
今回はサウンド処理を作成してみたいと思います。

サウンドについて

HTML5のaudioを使ってサウンドを再生します。
サウンドを扱うプログラムは以下を作成します。

読み込み
サウンドファイル名を配列にしてaudioオブジェクトを生成します。
以下の処理をアプリ起動時に実行することでファイルを読み込み、再生することが可能になります。

サウンドファイル読み込み

// 変数
var audioObject;
var isAudioPlay;

var audioFileNames = [ "bgm.mp3", "se.mp3" ];
audioLoad( audioFileNames );

function audioLoad( fileNames )
{
	var objBody = document.getElementsByTagName( "body" ).item(0);
	var i;

	audioObject = new Array( fileNames.length );

	for( i=0; i<fileNames.length; i++ ){
		audioObject[i] = document.createElement( 'audio' );
		audioObject[i].src = fileNames[i];
		objBody.appendChild( audioObject[i] );
	}
	isAudioPlay = true;
}

再生

• BGMの場合は再生終了後も自動でループ再生
• SEの場合は1度だけ再生
  という違いがあるため、その指定を出来るようにしています。

サウンド再生

playAudio( 0, true );
playAudio( 1, false );

function playAudio( num, isRepeat )
{
	if( !isAudioPlay )	return;

	if( isRepeat ){
		audioObject[num].setAttribute( 'loop', 'true' );
		audioObject[num].setAttribute( 'repeat', 'true' );
	}
	audioObject[num].play();
}

停止
停止はサウンドファイルの番号を指定するだけで可能です。
pauseだけだと停止するだけなので、合わせて再生位置もリセットしておきます。

サウンド停止

stopAudio( 0 );

function stopAudio( num )
{
	audioObject[num].pause();
	audioObject[num].currentTime = 0;
}

サンプル

いくつかのサウンドを再生出来るサンプルを作成しました
カーソルキーで選択し、スペースキーを押すと再生できます

See the Pen Qiita24_sample01 by nojima (@noji505) on CodePen.

再生されるか試してみて下さい。

最後に

今回はサウンド再生を行いました。
BGMやSEが鳴るとゲームが華やかになりますね。
次回は今までのサンプルにサウンド再生を組み込んでみたいと思います。