jqueryで効果音を鳴らす。ミュート機能をつけるなど。

JavaScriptとか

よくあるなんらかのイベントが実行された時に音を鳴らすやつ(効果音など）。
あと、ミュート機能のボタンもつける。




美しいやり方がわからんかった上にググってもよくわからかったので、自己流です。もっと美しい方法があると思います。



かなり泥臭いですが、一応メモ。

jqueryでは。

$('embed').remove();
$('body').append('<embed src="../hoge.wav" autostart="true" hidden="true" loop="false">');

とすれば、音を鳴らせる。問題は、ミュートボタンを押したら効果音がならないようにしたいんだけどもよくわからなかったので、このようにした。

<div id="soundari">
<a class="btn btn-mini btn-primary" type="button">音あり中</a>
<a class="btn btn-mini btn-white" type="button" id="mute">消音する</a>
</div>


<div id="soundnasi" style="display:none">
<a class="btn btn-mini btn-white" type="button" id="soundarimasu">音ありにする</a>
<a class="btn btn-mini btn-primary" type="button">消音中</a>
</div>

というかんじで２つのdiv要素を作ってデフォルトでは音ありバージョンが表示されるようにする。
ちなみにTwitterBootstrap使ってます。
primaryとwhiteの色が切り替わるんで、スイッチを切り替えている感じが出ます。便利！


で、ボタン押されたら表示を切り替える。

 document.getElementById('soundarimasu').onclick=function(){
  	if(document.getElementById('soundari').style.display == 'none'){ 
  		document.getElementById('soundari').style.display = 'block'; 
  		document.getElementById('soundnasi').style.display = 'none';
  		}else{ 
  		document.getElementById("soundari").style.display = 'none'; }
  	
  };
 





  document.getElementById('mute').onclick=function(){
  	if(document.getElementById('soundnasi').style.display == 'none'){ 
  		document.getElementById('soundnasi').style.display = 'block'; 
  		document.getElementById('soundari').style.display='none';
  		}else{ 
  		document.getElementById("soundnasi").style.display = 'none';}
  	
  };

この辺、生のjavascriptで書いてるのは特に理由はないです。jqueryのtoggleとかで書いたほうがきれいかもですね……。今気づいたや。

後、日本語でIDとか振るのはいかんですね。悪い癖だ。

で、後は

 if(document.getElementById('soundnasi').style.display == 'none'){
$('embed').remove();
$('body').append('<embed src="../hoge.wav" autostart="true" hidden="true" loop="false">');

}

みたいな感じにした。
音なしのdivのスタイルがnone、つまり音ありが表示されている時には音をならす。

音なしのdivが表示されていたら、音を鳴らさない。

汚い…。