月別: 2012年11月

停止ボタン、巻き戻しボタンの処理
まず、停止ボタン
オーディオを停止するには
pause()
を呼び出す
pauseは一時停止
実は、HTML5では、一時停止はあるけど
停止はない
なので、次にplay()を呼び出すと
一時停止した場所から再生が始まる
次に、巻き戻しボタンについて
これも、意外かもしれないけど
HTML5 Audioには、巻き戻しがない
対処として
HTML5Audioでは、再生ヘッドの位置を示す
currentTimeプロパティを使う
プロパティの値は、再生している秒数
つまり、
currentTime=0;
なら
再生ヘッドがオーディオデータの最初似戻り、巻き戻しとおなじになる
さらに、pause()で一時停止すれば、
巻き戻して止まったように見える
ゲームとかでもよくあるけど
当たり判定とか、ライフが減るのは　
ある意味見せかけ処理なので
処理がわかると応用かできるので、便利
次に、再生速度のコントロール
について
DVDとかで、よくある
標準再生、倍速再生、スロー再生とかが
このコントロール
再生速度の制御には
playbackRateプロパティと
defaultplaybackRateプロパティの
両方へ
再生速度をあらわす数値を入れる
等倍速度なら 1.0
２倍速なら 2.0
スロー再生なら 0.5
とする
ちなみに、1.2とかもできるけど
指定した速度で動くかは、ブラウザ次第
なので、正確な指定は難しい

HTML5Audio再生関連イベント
loadstart
データの読み込み開始
loadedmetada
情報(メタデータ)を読み込んだ
progress
情報読み込み中
loadeddata
データを読み込んだ
error
エラーが発生した
stalled
通信が停止した
abort
読み込みが中断された
suspend
一時読み込みを停止
canplay
再生が可能になった
canplaythrough
スムーズな再生が可能になった

JavascriptでHTML5Audio制御
まず、何度もAudio要素の呼び出しを書くのは面倒だから
var audioObj = document.getElementById(“myAudio”);
というように、変数に格納したほうが楽
そして、オーディオ再生だけど
これは
play()を呼び出すだけで使える
今回なら
audioObj.play();
もし、再生ボタンを押したら
オーディオ再生
ていうようにするなら
document.getElementById(“playButton”).addEventListener(“click”,function(){
audioObj.Play();
},true);
ただし、実用的なプログラムにするなら
これだけだとダメ
それは、HTML5Audioは
まず、ページを表示してから音楽を再生する
つまり、ストリーミング再生じゃない
これは、YouTubeをネット回線の遅いとこで再生した時によくある再生してるけど
ネットからの画像ダウンロードが追いつかないという状態になる
このため、clickじゃなくて
canplaythrough　を指定する
ちなみに、canplaythroughは
スムーズな再生が可能になったとき
という意味

JavascriptでHTML5 Audio対応かチェック
古いブラウザとかで、HTML5 Audio非対応ブラウザだと
エラーになり、scriptが停止する
これでは困るから
HTMLAudioElementオブジェクトの
有無を
ifを使って調べるようにする
つまり、HTMLAudioElementオブジェクトがないなら
処理を行う関数から抜け出るようにする
ソースにすると
if(!HTMLAudioElement){
return;
}
こうすれば、非対応ブラウザでは以下の処理が行われずにすむ

HTML5入力チェック無効化
Javascriptで入力チェックしたいときには
HTML5の入力チェックを無効化する
これを行うには
HTMLなら
form要素にnoValidate属性を追加する
Javascriptなら
formオブジェクトの
noValidateプロパティにtrueを設定する
もし、元通りに標準の入力チェックをしたくなったら
noValidateにfalseを指定すればいい

プログレスパーの値の変更
プログレスパーを使い、予約状況がみれるようにする
これなら視覚的にわかりやすくなる
ちなみに、、応用すればゲームでHPが減るのをみたりできる
とりあえず、今回は、ボタンがクリックされるたびに、10人ずつ予約が埋まるというもの
まぁしつこいようだけど
一撃くらうごとにHPが減るとかにも使える
まぁ処理を書き換えればだけどね
では、解説
プログレスパーの値は、
progress要素のvalueプロパティに入っている
このvalueプロパティの値を読み出して
計算を行い、結果をvalueプロパティに書きこめばok
格ゲーのあたり判定がでたら
ライフが減る計算して、それをライフサイクルパーに反映しているとかんがえればわかりやすい
とりあえず
今回は、予約状況を調べるボタンのソース
document.getElementById(“resCheck”).addEventListener(“click”,function(){
基本的に、ボタン作成処理は
ボタンIDを
document.getElementById()へ設定して
判別させて
addEventListener()で動作を追加する
var n=document.getElementById(“resSTatus”).value;
このresSTatusは
progress要素のID
なので
.valueでその値を読み出しているということ
これで、変数nにこの値が代入される
これを10ずつ増やしたいなら
n=n+10;
そして、再度、値を書き換えたいから
document.getElementById(“resSTatus”).value=n;
これで、10足した状態に上書きされる
あとは、HTMLへ反映するため
ele.innerHTML=n;
},true);

エラーチェック
Javascriptで入力した場合、入力した値が、指定した範囲を超えている
このため、Javascriptで入力チェックをリアルタイムでする必要がある
ただし、HTML5 で作成されたformなら
checkValidity()
で調べることができる
HTML5でないなら
従来どおりに
空欄チェック、型チェックをするscriptを何行もかかないとならなくなる
checkValidity()の使い方は
input要素のidを指定して、
checkValidity()を呼び出す
もし、input要素のid=”resNumber”なら
var flag = document.getElementById(“resNumber”).checkValidity();
となる
checkValidity()は
入力が正しいならtrue
不正ならfalseを返す
これを使い
if文と合わせれば、エラーチェックの出来上がり
if(flag == true){
okだったときの処理
}else{
不正だったときの処理
}
というかんじになる

内容を数値として読み出す
Javascriptでは
テキストフィールドに入力された数値は
文字列として読み出されるため
値を、加算しようとしても
文字列の連結になってしまう
このため、parseInt() とか parseFroat()
などを使い、数値型に変換してから
計算していたけど
HTML5では
内容を数値として読み出せるプロパティの
valueAsNumber
が使えるため、効率がよくなった
ちなみに、valueAsNumberで
読み出すと、数値型になっているから
そのまま演算することができる
内容を数値として読み出す
Javascriptでは
テキストフィールドに入力された数値は
文字列として読み出されるため
値を、加算しようとしても
文字列の連結になってしまう
このため、parseInt() とか parseFroat()
などを使い、数値型に変換してから
計算していたけど
HTML5では
内容を数値として読み出せるプロパティの
valueAsNumber
が使えるため、効率がよくなった
ちなみに、valueAsNumberで
読み出すと、数値型になっているから
そのまま演算することができる