先日、ブラウザでゲームを作っていた時に、audioタグを使って簡単に音を出すことができたんですが、どうもタイミングが合わないことが多い。
タグと同時に、音源データもブラウザに読み込まれてメモリにキャッシュされていると考えていたんですが、タイムラグがどうにもこうにも気になる。
ページ読み込み直後であれば仕方がないかと思うんだが、動作させているとページを切り替えたりしなくても何だかタイミングが合わない時がある。
画像の場合は目に見えて読み込まれていることが分かるのですが、音声コンテンツはどういう状態なのかが目視できないので、これまでB2Bマーケティングツールだけ作ってきた僕としては初体験なのである。
タグではなく、audio関数を使うといい感じ
WEBで検索すると、多くのサイトでaudioタグやvideoタグでcontrol機能を使ったメディア・コンテンツ操作が紹介されていますが、HTML5という技術レベルでは、確かに簡単なタグで便利に操作ができてしまう事で十分な情報です。
ゲームを作るというレベルで考えると、もう少しアルゴリズムを有する細かなプログラミングが必要なのかもしれないと調べてみたところ、audio関数というのがあることが分かった。
実は使い方は非常に簡単で、以下のようにするだけで簡単に音声が鳴らせます。
var audioContents = new Audio("audio.mp3");
// 再生
audioContents.play();
// 停止
audioContents.pause();
// 再生開始時間を変更
audioContents.currentTime = 0;
拍子抜けくらいタグで扱うのとほぼ変わらないです。
でも処理をこうしただけで、タイムラグがほぼなくなりました。
おそらくメモリ常駐する時の状態が違うんでしょうね。
ボタンを連打して確認してみよう
とりあえず、タグ版とaudio関数版を作っておいたので気になる人は比べてみてください。
でも、人の手で連打したぐらいではあまり認識しづらいかもいしれませんけど・・・
あっ！、あと、音が出るので、電車の中でこの記事を見ている人は気をつけて押してくださいね。
0 件のコメント:
コメントを投稿