【HTML5】ボタンにマウスオーバーした時に効果音を鳴らす

マウスがボタンに重なったら音を出す

今までWEBページで音を出すのはマナー的にご法度でしたが、

申し込みボタンに音を付加することでクリック率が高くなるというデータもあり

WEBの技術屋の常識とお客様の認識は異なってきているのかもしれません

最近はHTML5で手軽に実装できるようにもなったので使ってみるのも手かもしれません。

但し、今までどおり音が鳴る旨の注意文はあったほうがいいのかなとも思います。。

今回作るボタンはこんなぼたん（※音がなりますので注意）

マウスオーバーすると音が鳴るボタン

まず効果音を用意する

マウスオーバーしたら「チャリ～ン」となるようにするため効果音を用意します

今回私が使わせてもらったのはTAM music Factoryさん

http://www.tam-music.com/index.html

マウスオーバーの効果音ですから、大体1秒位のファイルがいいでしょう

TAM music Factoryさんからお好きなwavファイルをダウンロードさせてもらいます

音声ファイルを３種類に変換する

なるべく多くのブラウザで音声を再生できるように音声ファイルを３種類に変換します

今回「WAV」ファイルが手に入ったので、あとは「MP3」「OGG」ファイルに変換しましょう

変換は以下のサイトがお手軽です

http://media.io/ja/

ページに音声ファイルを仕込む

まずはページに音声ファイルを仕込みます

変換した３種類のファイルをHTML5の「audio」タグで埋め込んで下さい

 
<audio id="overSound" preload="auto">
	<source src="sound.mp3" type="audio/mp3">
	<source src="sound.ogg" type="audio/ogg">
	<source src="sound.wav" type="audio/wav">
	<p>※お使いのブラウザはHTML5のaudio要素をサポートしていないので音は鳴りません。</p>
</audio>
 

Javascriptを書く

Jqueryを読み込んだ後に以下のように記述します。

HTML5のaudioは一旦playをすると終了するまで音が鳴らない仕様になっています

これではマウスオーバーを連続で行った場合に、現在再生されている音が終了するまで

次の音が鳴らなくなってしまいますので「currentTime」で開始時間をリセットしてやります。

 
$(function(){
 
	//音を鳴らす
	$('.appButton').mouseover(function(){
 
		document.getElementById("overSound").currentTime = 0;
		document.getElementById("overSound").play();
 
	});
 
 
});
 
 

最後にボタンを配置します

以下のとおりボタンを配置します

 
<img src="button.jpg" class="appButton">
 

これにてマウスオーバーすると音が鳴るボタンの完成です

マウスオーバーすると音が鳴るボタン