無職のプログラミング　2010年10月

HTML5 Audio オブジェクトを JavaScript で制御する方法

HTML5 の Audio オブジェクトについて調べたことをまとめる。
なお、本エントリでは Audioタグについては記述しない。
＜注意＞以下で示すソースコードは、Firefox3.6 と GoogleChrome7 でしか検証していません。

目次
1. HTMLAudioElement オブジェクトの作成
2. HTML5 Audio およびコーデックのサポートチェック
3. 再生する Audio ファイルの指定
4. Audio ファイルの再生、一時停止、停止
5. Audio ファイルの音量変更
6. サンプルプログラム

1. HTMLAudioElement オブジェクトの作成
参考ページ： audio 要素 - HTML5 タグリファレンス - HTML5.JP
JavaScriptで制御するために、Audio要素のオブジェクトを作成する必用がある。
作成方法は以下の2通り

  // 再生するファイルのアドレスを指定せずにオブジェクト作成
  audio = new Audio("");  // 引数に空文字列を指定
  // 再生するファイルのアドレス(URL)を指定してオブジェクト作成
  audio = new Audio("./sound/temp.mp3");

引数なしで new Audio() とすると、Operaでエラーになるそうなので注意。

2. HTML5 Audio およびコーデックのサポートチェック
参考ページ：ブラウザーのネイティブなオーディオ - html5doctor - HTML5.JP
各ブラウザのコーデックサポート状況を見るとわかるように、ブラウザによって出力可能なコーデックが異なる。
また、Internet Explorer8以下のようにそもそもHTML5 Audioをサポートしていないブラウザもある。
サポートチェック方法は以下のとおり

try {
  audio = new Audio("");
  if(audio.canPlayType){
    var canPlayOgg = ("" != audio.canPlayType("audio/ogg"));
    var canPlayMp3 = ("" != audio.canPlayType("audio/mpeg"));
    if(canPlayOgg){
      // oggをサポートしている
      audio.src = "./sound/test.ogg";
    }else if(canPlayMp3){
      // mp3をサポートしている
      audio.src = "./sound/test.mp3";
    }else{
      throw "oggもmp3もサポートしていません";
    }
  }else{
    throw "canPlayTypeメソッドが存在しません";
  }
} catch (e) {
  // HTML5 Audioをサポートしていなければ例外が発生
  audio = null;
}

canPlayType(type)メソッドは、引数 type に MIME タイプを指定すると "", "maybe", "probably" のいずれかを返す。
""はそのタイプを再生できないことを示す。

上記ソースコードでは「new Audio("") で例外が発生するかどうか」で HTML5 Audio が使用可能かを判断しているが、
例外を発生させずにチェックするには

var audioTagSupport = !!(document.createElement('audio').canPlayType);

とすれば、audioTagSupport の true/false でAudioが使用可能/不可能を判定できる。
(Audio要素をサポートしていなければ document.createElement('audio').canPlayType が undefined になるため。
JavaScript では !(undefined) は true に変換される)
なお、上記ソースコードで if(audio.canPlayType) としているが、引数を指定しない audio.canPlayType の値は、true/false ではなく function オブジェクトか undefined。

3. 再生する Audio ファイルの指定
以下の２つの指定方法がある
・1章で示したように、 Audio オブジェクト作成時に指定する
・2章で示したソースコードのように、オブジェクト作成後に src属性へセットする
どちらの方法でも、ファイルのアドレスを妥当な URL で指定すること。
src属性の仕様に以下の記述がある。

メディア要素の src 属性がセットされたり変更されたら、ユーザーエージェントは、そのメディア要素のメディア要素ロード・アルゴリズムを呼び出さなければいけません。

つまり、ファイルのアドレスがsrcにセットされた時点で、ファイルのダウンロードが行われる。

4. Audio ファイルの再生、一時停止、停止
再生、停止に関するメソッドには play() と pause()がある。
pause()メソッドは停止ではなく一時停止であり、pause()後にplay()すると一時停止箇所から再生される。
停止や先頭から再生するケースを含んだソースコード例を以下に示す。

var audio = null;  // Audio オブジェクト

/* 初期処理 */
// Audioやoggのサポートチェックは略
init = function(){
  // Audioオブジェクト作成
  audio = new Audio("");
  // load()直後に再生しないようにautoplayをfalseに設定
  audio.autoplay = false;
  // Audioファイルのアドレス指定
  audio.src = "./sound/test.ogg";
};

/* 再生(一時停止中は一時停止箇所から再生) */
play = function(){
  audio.play();
};

/* 先頭から再生 */
playfromstart = function(){
  audio.load();  // ロード・アルゴリズムを実行して初期状態に戻す
  audio.play();
};

/* 一時停止 */
pause = function(){
  audio.pause();
};

/* 停止 */
stop = function(){
  // ended属性で終了判定する
  if(!audio.ended){
    audio.pause();
    audio.currentTime = 0;  // 再生位置を0秒にする
  }
};

停止処理においてended属性で終了判定している理由は以下のとおり。
再生中に currentTime = 0 を実行すると、play() しなくても最初からの再生処理が実行される。
pause() 後に currentTime = 0 実行すると再生処理は行われないはずだが、Firefox3.6では再生終了後のpause()は無視されて、最初からの再生処理が実行されてしまうため、終了判定をしている。
play()の仕様は「再生が終了していたら、最初から再生しなおす」なので、再生終了の場合は再生位置の移動は不要。

また、先頭から再生する処理において

audio.currentTime = 0;
audio.play();

としても良さそうだが、Firefox3.6では一度も play() していない状態で currentTime = 0 を実行するとエラーになる。
また、GoogleChrome7 では currentTime = 0 直後に play() すると、pause()した位置前後の音が混ざることがある。(少なくとも自分の環境では)

なお、ループ再生する場合は

audio.loop = true;
audio.play();

とすればよいのだが、Firefox 3.6 では loop 属性は未実装。詳細はこちらを参照。

5. Audio ファイルの音量変更
volume属性に 0.0 ～ 1.0 の範囲の数値を設定することで音量を変更できる。0.0 は最小音量で、1.0 は最大音量。
Firefox3.6とGoogleChrome7でテストした限りでは、volume = 0.0 だと何も聞こえない。
muted属性に true/false をセットすることにより、ミュート/ミュート解除を行う。muted属性はvolume属性より優先される。

詳細はリファレンスの4.8.9.10 ユーザー・インタフェースを参照。

6. サンプルプログラム
5章までの内容を用いて、音の再生、停止、音量の変更を行うサンプルプログラムを作った。
＜サンプルプログラムの説明＞
「音を出す」ボタンを押すとBGMが再生され、再度押すとBGMが止まる。
BGMが再生されているときに「ジャンプ」ボタンを押すと、ジャンプの効果音が再生される。
音量はラジオボタンで変更できる。
loop属性をサポートしていないブラウザでも、少々間隔をおいてBGMがループ再生する。
jQueryはVer1.4.2を使用。
ソースコードは以下のリンクを参照。
soundtest.html soundtest.js

以上。
HTML5 Audio についてもっと知りたい方はメディア要素 - HTML5 タグリファレンス - HTML5.JP を参照して下さい。

スポンサーサイト

このページのトップへ

HTML5 Canvas で作ったゲームで音が出るようにした

HTML5 Audio を使って、一昨日作ったゲームで音が出るようにした。
FireFox3.6 と Google Chrome7 でちゃんと音が出ることを確認した。
Internet Explorer8 は HTML5 Audio 未サポートなので音が出ない。

FireFoxでは loop属性が未実装だったり、
Google Chromeでは currentTime = 0 の直後に play() すると前の音がちょっと出力されたりと結構手こずった。
きちんとクロスブラウザ対応するにはライブラリを使ったほうがいいんだろうな。
どんなライブラリがあるか調べてないけど。

明日は HTML5 Audio についてわかったことをまとめようかな。

このページのトップへ

HTML5 Audio について調べる

昨日作ったゲームで音が出るようにしようと、HTML5 Audio について調べた。

HTML5タグリファレンス audio要素には HTMLAudioElement オブジェクトの作り方ぐらいしか書いてなくて、
音を制御するためのメソッドや属性は HTML5タグリファレンスメディア要素に書いてある。

リファレンスをざっと見ても使い方がよくわからなかったが、HTML5 Audioで作るiTunes風音楽プレイヤーを読んでからリファレンスを読んだら、使い方が理解できた。

HTML5 Audio を使用するにあたって注意すべき点は、ブラウザによって再生可能なコーデックがバラバラであること。
各ブラウザのコーデックサポート状況
「ブラウザが HTML5 Audio をサポートしているか」「ブラウザが該当コーデックをサポートしているか」のチェック方法は、
ブラウザーのネイティブなオーディオ - html5doctor - HTML5.JP
の「クロス・ブラウザー対応」の章にサンプルプログラムがある。

今日は、以下の処理を行うプログラムを作った。
・音を出す／止めるボタンを押したらBGMを再生する／停止する
・ラジオボタンで音量を切り替える
・BGM再生中にジャンプボタンを押したら効果音を再生する
・mp3をサポートしているブラウザはmp3ファイルを、そうでなければoggファイルを使用する

明日はゲームのプログラムに音を出す処理を組み込もう。

<関連記事>
HTML5 Audio オブジェクトを JavaScript で制御する方法

このページのトップへ

横スクロールのゲームっぽい何かを作ってみた

HTML5 Canvas で簡単なゲームを作ってみようと思い立ち、8日目にしてやっと公開できるモノができた。
こちらに公開してます → 迫ってくるブロックをジャンプして飛び越える
sキーを押してスタートしてください。

できるまでの8日間を振り返ってみる。

1日目
  「スペースキーを押したら丸が放物運動をする」ものを作る。

2日目
  1日目に作ったものを、「スペースキーを押すまでは地面が等速で動いて、スペースキーを押したら地面が止まって丸が放物運動をする」ようにした。
  作ったものをここに公開。

3日目
  プログラミングはせず、ネットでゲームプログラミングについて調べた。
  ジャンル別ゲームの作り方とアルゴリズムまとめを見つけた。

4日目
  マリオのジャンプ実装法とVerlet積分(実践編)で紹介されていたVerlet法について調べる。
  みその計算物理学というすごいサイトを見つける。

5日目
  Verlet法を使って、キーを押した長さに応じてジャンプの高さが変わるプログラムを作成。
  作ったものをここに公開。

6日目
  ブロックが右から左へ移動するアニメーションと、キャラクターとブロックの当たり判定をプログラミング。ゲームっぽくなる。

7日目
  ブロックの位置や高さを記述した文字列を読み込んで、ブロックを配置する部分をプログラミング。
  スタート／クリアメッセージ画像をGIMP2で作成。
  テストと難易度の調整。

8日目(今日)
  引き続きテストと難易度を調整し、Internet Explorer対応をして公開。

「迫ってくる物体をジャンプして飛び越える」というゲームのイメージは1日目からあったが、そのために必要な「キーを押した長さに応じてジャンプの高さを変える」プログラムを作るのに5日かかった。時間がかかった割には、他に応用できそうな気がしない。
テストと難易度の調整に2日かかった。keyupイベントが拾われなかった場合のバグに公開直前に気づくなど、パスを網羅しても見つけられない部分のテストが難しい。
自分で作ったステージをクリアできなかったため、ジャンプ力を表示したり地面に等間隔に印をつけたりした。

次は音が出るようにしよう。

このページのトップへ

キーを押した長さに応じてジャンプの高さを変える

今日は、キーを軽く押したら少しジャンプして、キーを押し続けると高くジャンプする処理を実装した。
HTML5 Canvas で作ったものをこちらに公開してます → スペースキーを押し続けると高くジャンプする
sキーを押してスタートしてください。

ボタンを押した長さに応じてジャンプの高さを変える方法をネットでちょっと調べてみたが、見つけられなかったので自己流で実装した。

1. ジャンプの仕様
キーを離したときにジャンプすれば簡単なのだが、それだとゲームになりにくいので
「キーを押した時点でジャンプ開始し、ジャンプ中に高さが変わる」仕様とする。

ジャンプの高さの仕様は次のようにした。
・ジャンプの高さは5段階。キーを押し続けて3、5、7、9フレーム目で高さが変わる。それ以上押し続けても変わらない。
(今回作ったプログラムは12fpsなので、2フレームごとに変わるようにした)
・ジャンプの高さは段階にほぼ正比例する。

2. ジャンプ中のy座標計算方法
ジャンプ中のy座標はVerlet法で求める。その式に値を加算してジャンプの高さを変えることにした。
Verlet法についてはジャンプしたときの座標をVerlet法で求めるを参照。
その部分の処理は以下のとおり。

  // this.charObj.y : 現在のy座標
  // this.charObj.y0 : 前フレームでのy座標
  // this.gh2 : 物体にかかる重力に関係する値
  // this.jumpval : キーを押した長さに応じて加算される値
  this.charObj.y += this.charObj.y - this.charObj.y0 + this.gh2 + this.jumpval;

y座標を求める前に this.jumpval を求める必要がある。
this.jumpval は毎フレームで加算するのではなく、高さを変えるときだけ加算しそれ以外では this.jumpval = 0 とした。
また、高さを変えるときに加算する値は、以下のように配列 this.jumpvalArr で持つことにした。

  // ジャンプ力加算値の配列
  // 3、5、7、9フレーム目で加える this.jumpval が格納されている。
  this.jumpvalArr = [-5, -4, -4, -3.5];

こうすることで、this.jumpvalArr 要素の値を変えるだけでジャンプの高さを調整することができる。

以上を盛り込んだ、ジャンプ中のy座標を求める処理は以下のとおり。
この処理がフレームごとに実行される。

  /* ジャンプ中のy座標を求める処理 */
  this.jump = function(){
    // ジャンプ力を加算するか判定し、加算値を求める
    // this.jumpval : y座標を求める際に加算される値。上記のthis.jumpvalと同じ
    this.jumpval = 0;
    if(this.addjump){  // SPACEキーが押され続けている状態のとき this.addjump = true
      // SPACEキーが押され続けている状態の場合、this.jumpAddSepフレームごとにジャンプ力を加算
      // this.addjumpCnt : SPACEキーが押され続けて何フレーム経過したか
      // this.jumpAddSep : 何フレームごとに this.jumpval を加算するか。今回は2
      // this.jumpadded : 何回 this.jumpval が加算されたか
      // this.jumpvalArr[] : this.jumpval の値を格納した配列
      // this.showJumpMsg() : ジャンプ力を表示
      if((this.addjumpCnt % this.jumpAddSep == 0) && (this.addjumpCnt > 0)){
        // ジャンプ力加算値を求める
        this.jumpadded++;
        if(this.jumpadded >= this.jumpvalArr.length){
          // 最後の加算。これ以上SPACEキーを押し続けても加算しない
          this.jumpval = this.jumpvalArr[this.jumpvalArr.length - 1];
          this.addjump = false;
        }else{
          this.jumpval = this.jumpvalArr[this.jumpadded - 1]
        }
        this.showJumpMsg(this.jumpadded);
      }
      this.addjumpCnt++;
    }

    // キャラクターの座標をVerlet法で算出
    // 詳細な説明はジャンプしたときの座標をVerlet法で求めるを参照
    // this.charObj.y : 現在のy座標
    // this.charObj.y0 : 前フレームでのy座標
    // this.gh2 : 物体にかかる重力に関係する値
    var backy = this.charObj.y;  // 現在のy座標を待避
    if(this.charObj.y == this.charObj.y0){
      // 初速度から1フレーム目のy座標を算出。詳細は略
      this.charObj.y = this.G / (2 * Math.pow(fps,2)) + this.v0 / fps + this.charY0;
    }else{
      this.charObj.y += this.charObj.y - this.charObj.y0 + this.gh2 + this.jumpval;
    }
    this.charObj.y0 = backy;

    // this.charY0 : y座標初期値
    if(this.charObj.y >= this.charY0){
      // ジャンプ終了
      this.charObj.y = this.charY0;
      this.jumping = false;  // ジャンプ中フラグをOFF
      this.showJumpMsg(-1);
    }
  }

以上。
this.jumpvalArr の値を調整するのがちょっと大変だった。
重力加速度にこだわらなければもっとシンプルになるのだろうか。

せっかくなので作ったページのソースを載せておく。jQuery は Ver1.4.2 を使用。
html5game2.html canvasgame2.js

このページのトップへ

ジャンプしたときの座標をVerlet法で求める

ジャンル別ゲームの作り方とアルゴリズムまとめで紹介されていた
マリオのジャンプ実装法とVerlet積分を読んだが、マリオのジャンプ実装法とVerlet積分(実践編)を読んでもVerlet法がよくわからなかった。

Verlet法について調べたところ、みその計算物理学というすごいサイトを見つけた。
ここの Verlet法（PDF形式）を読んでVerlet法を理解できたので、ジャンプしたときの座標を求める方法について書く。

1.座標の計算方法
時刻 t における物体の座標を r(t)、物体に作用する力を f(t)、物体の質量を m とする。
時間の間隔を h とすると、次の時間の座標 r(t+h) は、現在の座標 r(t) と前の座標 r(t-h) を用いて

と表すことができる。(近似式だが、等式と考えて実用上問題無い)
物体にかかる力が重力のみの場合、重力加速度を g とすると f(t)=mg のため、

となる。
gh^2は定数のため、初期値r(0)と1フレーム目の値r(h)が与えられれば、加減算とループのみで座標を計算して軌道を描くことができる。

自由落下の場合、t=0 のときの速度を v0 とすると

となるので、これからr(h)を求めることができる。
hが十分に小さければ r(h)=v0h+r(0) でも実用上問題無いが、「前回の値から次回の値を求める」というVerlet法の性質から、r(h)の精度が描かれる軌道の精度に大きく影響するので注意が必要。

2.サンプルプログラム
y軸方向にボールをジャンプさせてボールが弾むプログラムを HTML5 Canvas で作成した。
y座標を求める部分

this.charObj.y += this.charObj.y - this.charObj.y0 + gh2;

でVerlet法を用いている。

ソースコード全文は以下のとおり。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Verlet法で計算した、ボールが弾むアニメーション</title>

<script type="text/javascript">

</script>
<style TYPE="text/css">

</style>
</head>
<body onload="start();">
<div class="title">Verlet法で計算した、ボールが弾むアニメーション</div>
<div class="body">
<canvas id="cv1" class="cv" width="100" height="150"></canvas>
</div>
</body>
</html>

このページのトップへ

横スクロールのゲームっぽい何かを作ってみる 3日目

今日はプログラミングはせず、ゲームプログラミングについて調べた。

ゲームプログラミングの基礎について書かれているところはないかなと適当に検索して見つけた
DirectX8による２Ｄゲームプログラミング講座
を一通り読んだ。
DirectXを使ったC++プログラミング講座だったので、今の自分に関係無い部分が多かったが、処理の全体的な流れが何となくわかった。

アルゴリズムの情報はないかと探してみたら、
ジャンル別ゲームの作り方とアルゴリズムまとめ
を見つけた。
ここのアクションゲーム関連で紹介されているサイトを見ながらやれば作れそうなので、明日はプログラミングしよう。

このページのトップへ

横スクロールのゲームっぽい何かを作ってみる 2日目

HTML5 Canvas で、「スペースキーを押したら丸が放物運動をする」ものを作った。
こちらに公開してます。sキーを押してスタートしてください。

Internet Explorer8でも動作確認した。excanvas.js だと動きが遅いので、FlashCanvasを使用した。
htmlファイルを直接IEで開くとFlashCanvasが動かなかったので、ローカルでテストする際もWebサーバーを立ち上げてテストした。

今回は簡単な RayCaster - MDC を参考にして作成した。
ゲームっぽいものになるまでは道のりが遠そうだ。

このページのトップへ

横スクロールのゲームっぽい何かを作ってみる 1日目

HTML5 Canvas で簡単なゲームを作ってみようと思ったが、何から手をつければよいのかわからない。
とりあえず「ボタンを押したら何かがジャンプする」ものを作ってみよう。

ジャンプしたときの動きは重力加速度での放物運動でいいかなぁと、高校物理を思い出しながらいろいろ式をいじって、「スペースキーを押したら丸が放物運動をする」ものを作った。
次に「スペースキーを押すまでは地面が等速で動いて、スペースキーを押したら地面が止まって丸が放物運動をする」ものを作ろうとしたが、地面を動かすのがうまくいかなくて今日は終了。

ジャンプやスクロールはアクションゲームの基礎の基礎だろうから、調べればいろいろありそうだ。
サンプルプログラムもたくさんあるだろう。
キリのいいところまで作ったら調べようかな。

このページのトップへ

canvasを使ったアニメーションの簡単なサンプルソースを読む

基本的なアニメーション - MDC で紹介されている、次の２つのソースコードを読んだ。

簡単な RayCaster - MDC
3D表示された迷路の中を移動するプログラム。

Canvas Adventure
横スクロールシューティングっぽいプログラム。敵は出て来ない。ナイフを投げるだけ。

簡単なRayCaster は、肝心の画面を表示する部分をちゃんと読んでいない。必要になったら読む。
Canvas Adventure は、背景のスクロール部分が参考になった。ただ、keydownイベントだけでキャラクターを移動させているので、動きがぎこちない。簡単なRayCaster のようにkeydownとkeyup両方のイベントを使用した方が、スムーズに移動できそうだ。

明日は横スクロールのゲームっぽい何かを作ってみよう。

このページのトップへ