ＨＰ作成講座、脱初心者編
ＨＰで音を鳴らす。ｗａｖファイル編
今回はホームページで音を鳴らしちゃうお話です。
下の、ぴ〜よこちゃんにマウスカーソルを当てると・・・
ＩＩＩＩＩＩＩＩＩ ＩＩＩＩＩＩ ＩＩＩＩＩＩ ＩＩＩＩＩＩ ＩＩＩＩＩＩ ＩＩＩＩＩＩ ＩＩＩＩＩＩ ＩＩＩＩＩＩ ＩＩＩＩＩＩ ＩＩＩＩＩＩＩＩＩ
ひよこ画像→ふたごの雑貨屋さん、ゆっこちゃん作。（こんなかわいい素材があるよん！）
「ぴよぴよ」と鳴きます。（ＩＥ６で確認済み。古いヴァージョンだと鳴らないかもしれない。）
まず、これに使っているものは・・・
ひよこ画像左向き
piyoikon1l.gif
ひよこ画像右向き
piyoikon1r.gif
ひよこアニメ画像
piyorlanime.gif
音声（ピヨ）ファイル
piyo.wav
ＪＡＶＡスクリプト
<head>
から
</head>
の間に書く
<script language="JavaScript">
<!--
//音声を鳴らす
function piyo(){
document.hiyoko.play();
}

//音声を止める
function pstop() {
document.hiyoko.stop();
}

//連続で音声を鳴らす
function piyopiyo() {
document.hiyoko.play();
timerID=setTimeout("piyopiyo();",30 );
}

//-->
</script>
ＨＴＭＬ
<body>
から
</body>
の好きなところに
書く
<!--音声ファイルの指定-->
<embed src="pic/piyo.wav" autostart=false hidden=true name="hiyoko"></embed>

<!--左向きのひよこ画像-->
<img src="pic/piyoikon1l.gif" width="13" height="17" border="0" onMouseOver="piyo();" onMouseOut="pstop();">


<!--右向きのひよこ画像-->
<img src="pic/piyoikon1r.gif" width="13" height="17" border="0" onMouseOver="piyo();" onMouseOut="pstop();">


<!--左右に動くひよこ画像-->
<img src="pic/piyorlanime.gif" width="13" height="17" border="0" onMouseOver="piyopiyo();" onMouseOut="clearTimeout(timerID);">
ファイルとして予め用意しておくのは、画像ファイル（ここでは３種類使ってます）、音声ファイルです。
そして、ＪＡＶＡスクリプトは<head>〜</head>の中に書きます。
ＨＴＭＬは、<body>〜</body>の中に書きます。
さて、音声ファイル・・今回はＷＡＶＥファイル（拡張子　．ｗａｖ）ですが、以下のような特徴があります。
  • サンプリングレート（周波数）がいろいろとあります。もしサンプリングレートについて、よくわからなくても、このことだけ知っておいてください。
    ＞これが大きいと・・音質→良、ファイルサイズ→大
    ＞これが小さいと・・音質→悪、ファイルサイズ→小
    単位・・Ｈｚ（ヘルツ）またはＫＨｚ（キロヘルツ）
  • 量子化ビット数も設定できます。もし量子化ビット数について、よくわからなくても、このことだけは知っておいてください。
    ＞これが大きいと・・音質→良、ファイルサイズ→大
    ＞これが小さいと・・音質→悪、ファイルサイズ→小
    単位・・ｂｉｔ（ビット）、１６ｂｉｔ か ８ｂｉｔ
  • ステレオかモノラル
    ＞ステレオ・・ファイルサイズ→モノラルの２倍
    ＞モノラル・・ファイルサイズ→ステレオの半分
  • 時間に比例してファイルサイズは大きくなります。
  • サーバーによっては、アップロードできるファイルの種類を限定している場合がありますので、自分のサーバーには置けない場合もあります。
ＨＰで、このファイルを利用するときはファイルサイズに注意が必要です。ちょっと長い音だと意外なほど大きいファイルサイズになります。
ファイルサイズを小さくするためには、とても短い音で、サンプリングレートをできるだけ小さく（たとえば１１ＫＨｚ）！量子化ビット数も８ｂｉｔ ！そして、モノラル！がよろしいようで。。
ちなみに、このページで鳴る「ピヨ」と言う音は、
音の長さ ０．１１３秒・・・サンプリングレート １１ＫＨｚ・・・ 量子化ビット ８ｂｉｔ・・・・モノラルになっています。それで、ファイルサイズは、１．２５ＫＢです。
そして、この音声ファイルをホームページで鳴らすためには、ページと共にその音声ファイルが読み込まれている必要があります。
その働きをしているのが、上記の表のＨＴＭＬのところに書いている、
<embed src="pic/piyo.wav" autostart=false hidden=true name="hiyoko"></embed>です。
srcは、
音声ファイルのアドレスを指定します。

autostartは、
そのページを見たとき自動的に音が鳴り始めるようにするには、trueを指定。まず音は鳴らさないのならfalseを指定します。今回の場合は、マウスがひよこ画像に重なる時以外には鳴らさないので、falseを指定しています。（autostartの変わりにautoplayと書いても良いです。）

hiddenは、
操作パネルを隠すかどうかです。trueを指定すると、操作パネルは表示されません。
falseを指定すると↓の様な操作パネルが表示されます。

nameは、
ＪＡＶＡスクリプトで、この音声を鳴らしたり止めたりするために使います。今回はhiyokoと名付けていますが、半角ローマ字で好きなように決めて良い部分です。

その他、ここでは設定していませんが、align、width、heightなどの属性も設定できます。
そして、ＪＡＶＡスクリプトで、このname="hiyoko"とした<embed>タグを操作します。
そのために次の３つの関数を用意しています。
//音声を鳴らす
function piyo(){
document.hiyoko.play();//hiyokoと名付けたものを再生する
}

//音声を止める
function pstop() {
document.hiyoko.stop();//hiyokoと名付けたものを停止する
}

//連続で音声を鳴らす
function piyopiyo() {
document.hiyoko.play();//hiyokoと名付けたものを再生する
//１０００分の３０秒後にこの関数（piyopiyo()）を実行するタイマーをセットする timerID=setTimeout("piyopiyo();",30 );
}//この関数は、タイマーが解除されるまで繰り返されることになる
後は、ひよこ画像のタグ<img>にイベントハンドラを設定して、マウスの操作で、この関数が働くようにしています。
<!--左向きのひよこ画像-->
<img src="pic/piyoikon1l.gif" width="13" height="17" border="0" onMouseOver="piyo();" onMouseOut="pstop();">
<!--右向きのひよこ画像-->
<img src="pic/piyoikon1r.gif" width="13" height="17" border="0" onMouseOver="piyo();" onMouseOut="pstop();">
これらの<img>タグには、
onMouseOver="piyo();"→マウスカーソルがこの画像に重なると、音を再生する関数・piyo()を実行するイベントハンドラ。
onMouseOut="pstop();"→マウスカーソルが画像から離れると、音を停止する関数・pstop()を実行するイベントハンドラ。
が、それぞれに設定されています。

<!--左右に動くひよこ画像-->
<img src="pic/piyorlanime.gif" width="13" height="17" border="0" onMouseOver="piyopiyo();" onMouseOut="clearTimeout(timerID);">
onMouseOver="piyopiyo();"→マウスカーソルがこの画像に重なると、音を連続再生する関数・piyopiyo()を実行するイベントハンドラ。
onMouseOut="clearTimeout(timerID);"→マウスカーソルが画像から離れると、・・・
timerID=setTimeout("piyopiyo();",30 )・・このタイマーを解除するイベントハンドラ。（これでpiyopiyo()の繰り返しが止まる）
が、設定されています。
また、画像ではなく、リンクタグや他のタグにしたり、イベントハンドラを別のものにしたり、いろいろと応用することが出来ます。
例・・・・
<div onClick="piyo();">クリックするとピヨ！</div>
クリックするとピヨ！
<textarea rows="4" cols="22" onKeyDown="piyo();">キー入力でピヨ！</textarea>

<a href="#URL" onMouseDown="piyo();">リンクをクリックするとピヨ！</a>
リンクをクリックするとピヨ！
<a href="#URL" onMouseDown="piyo();" onMouseOver="piyo();" onMouseOut="piyo();">ピヨピヨリンク</a>
ピヨピヨリンク
ＰＣ−Ｐａｒｋトップ
サイコロＴｏｗｎ！トップ




広告 花 万馬券 無料レンタルサーバー ブログ blog