HTML5のAudio要素とBase64を使った効果音の連続発生 – browser-land

HTML5のAudio要素とBase64を使った効果音の連続発生

 audio要素

audio要素は、文書内に音声コンテンツを埋め込むために使用します。
src属性または source要素を使用してメディアを選択します。

CASE. src属性で単一の音声ファイルを指定する

<audio src=”audio/sample.mp3″ controls>
 <p>このブラウザでは再生できません。</p>
</audio>

CASE. source要素で複数の音声ファイルを指定する

<audio preload=’none’ autoplay loop controls>
 <source src=”audio/sample.mp3″ type=”audio/mp3″>
 <source src=”audio/sample.ogg” type=”audio/ogg”>
 <p>このブラウザでは再生できません。</p>
</audio>

preload属性

ページ読み込み時の音声ファイルの読み込みを制御
* none:読み込まない
* metadata:メタデータを読み込む
* auto:読み込む

autoplay属性
autoplay属性が存在する場合、自動再生

loop属性
loop属性が存在する場合、ループ再生

controls属性
controls属性が存在する場合、再生や停止のためのインターフェイスを表示

 JavaScriptでの制御

CASE. Audioオブジェクトから音声ファイルを制御する

function fSetAudio() {
 var oAudio = new Audio();
 oAudio.src = ‘audio/sample.mp3’;
}

function fPlayAudio() {
 oAudio.play();
}

function fPauseAudio() {
 oAudio.pause();
}

function fStopAudio() {
 oAudio.pause();
 oAudio.currentTime = 0;
}

function fUpVolume() {
 oAudio.volume = oAudio.volume + 0.25;
}

function fDownVolume() {
 oAudio.volume = oAudio.volume – 0.25;
}

Audio()
audio要素オブジェクトを生成する

play()
再生する

pause()
一時停止する

load()
ロードを開始する(再生は行わない)

currentTime
現在の再生位置を表す秒数

volume
現在のボリューム、0.0(無音)から1.0(最大)まで指定可能

 Base64を使った効果音の連続発生

音声ファイルの読込によって音声データの連続再生を行うと音が遅れて再生されます。
これを回避する為Base64を使って音声データを読込みます。
base64とは、すべてのデータを64進数で表すエンコード方式です。
base64でエンコードした音楽をhtmlにそのまま埋め込む事で高速化を図ります。

CASE. Base64を使った効果音の連続再生

function fSetAudio(){
 var pNow = 0;
 var pMax = 5;
 var oAudio = new Array;
 var pBase64 = “data:audio/mp3;base64,……”;

 for (var i = 0; i <= pMax; i++) {   oAudio[i] = new Audio(pBase64);   oAudio[i].load;  } } function fPlayAudio() {  oAudio[pNow].play();  pNow += 1;  if (pNow > pMax){
  pNow = 0;
 }
}

サンプルでは0~5番までの配列を元に、6個のAudioオブジェクトを作成しています。
各オブジェクトにBase64でエンコードした音声データを読込させています。
昇順に再生させる事で6個までの効果音の音かぶりを可能にしています。

Browser-Land

: DATA

: BLOG

All
CSS
HTML5
JavaScript
WordPress

: MAIL


 

 

 

: PRAVACY POLICY

タイトルへ

サウンド設定

スクリーン設定

プレイ
データ
設定
停止
次へ
戻る
戻る
戻る
削除
再配置
戻る
戻る
メール
ブログ
Twitter
ポリシー
ユニット
武器
サークル
ボックス
コード
キング
ソルジャー
アーチャー
ウィザード
スペーサー
ギア
ホイール
クランク
フレームA
フレームB
レール
ウォール
ワイヤー
ゴム紐
カップ
大砲
弾倉
ウッド材
アイアン材
透過材
+5 deg.
-5 deg.
+45 deg.
-45 deg.
右回転
左回転
動力無し
Turn Right
Turn Left
Neutral
ロード
セーブ
バトル
ロード