« FlatTableの部分的表示 | トップページ | 状態遷移図を描きたい »

2014年4月20日 (日)

FlatTable のアニメーションに球の音を追加

FlatTabe のアニメーションには球を撞いた時や球同士が当たった時に音を出す機能が有りませんでしたが、今回、それが出来るようになりました。

音を出す方法を調べたところ、audio タグを使えば良いらしいと分かったのですが、それを FlatTable で使おうとしても上手く行きませんでした。audio タグについての解説は、どれも html ファイルを前提としており、SVG ファイルである FlatTable では audio タグを正しく認識してくれません。エラー画面には


    Uncaught TypeError: undefined is not a function 
が表示さていました。

ブラウザで音を出す方法を更に調べて行くと、Web Audio API が有ることが分かりました。これは JavaScript で使える API なので FlatTable でも使えるのではないかと期待しました。さっそく、解説に載っているサンプルプログラムを参考に簡単なコードを書いてローカルに置き、動作確認を試みました。しかし、コード中で使っている XMLHttpRequest がローカルの音源ファイルをロード出来ません(ブラウザは Chrome)。エラーメッセージとして


    Cross origin requests are only supported for HTTP.
が表示されていました。これは、ブラウザがセキュリティを考慮して、ローカルへのアクセスを制限しているのが原因です。試験用のファイルをサーバにアップロードして動作確認することは可能ですが、気が進みません。 FlatTable はローカルでも使えるものにしておきたいのです。

ほとんど諦めた気持ちになりながらも audio タグに名前空間を指定すればどうだろうかと考えて、その方法を調べることにしました。そして、やっと


    <audio xmlns="http://www.w3.org/1999/xhtml" id="id " preload="auto">
        <source src="音源ファイル " type="MIMEタイプ " />
    </audio>
に辿り着くことが出来ました。因みに、今回使用した音源ファイルの MIME タイプは audio/mp3 です。上記コードを FlatTable の SVG ファイルに挿入、そして、アニメーションを担当する JavaScript ファイルに

function soundShot(){
    document.getElementById("id ").play();
}
・・・
// 音の必要な箇所で soundShot() を実行
を挿入することで、音が出るようになりました。ただし、用意出来ている音源が MP3 だけ(追記2)なので、ブラウザによっては音が出ないかも知れません。なお、球を撞く強さや、球同士の当たる強さに応じて、音の大きさを変えるべきですが、現時点では、どれも同じ大きさです。いずれ修正したいと思っています(追記1)

追記1:修正しました。
追記2:Ogg を追加しました。

今回、使用した音源は効果音ラボさんで公開しているものを使わせてもらいました。

サンプルを載せておきます。画像の左上のボタン [ Anim ][ sequential ] でアニメーションが始まります。

« FlatTableの部分的表示 | トップページ | 状態遷移図を描きたい »

ビリヤードの配置図ソフト」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/584699/59501770

この記事へのトラックバック一覧です: FlatTable のアニメーションに球の音を追加:

« FlatTableの部分的表示 | トップページ | 状態遷移図を描きたい »