どもです。
次に必要になったときに忘れてそうなので、備忘しておきます。
参考:
[Qiita]既存の関数の呼び出しをフックする方法
[Syncer]クリックすると音が鳴るボタンの作り方
とりあえず上二つ見ればやり方は分かります。
①音ファイルを設置
<audio id="sound-file" preload="auto">
<source src="/sound/warning.mp3" type="audio/mp3">
<source src="/sound/warning.wav" type="audio/wav">
</audio>
普通はheaderとかfooterとかincludeで共通化してるはずなので、全ファイルに出力されるよう追記しておく。
PHPを使えない場合はjQueryのappend()とかで代用。
②alert()をフックする
//alertをフックしてビープ音を鳴らす
var originAlert = alert;
alert = function(){
//ビープ音を鳴らす
make_sound('sound-file');
//オリジナルへ委譲
var result = originAlert.apply(null, arguments);
}
function make_sound(id){
if(typeof(document.getElementById(id).currentTime) != 'undefined'){
document.getElementById(id).currentTime = 0;
}
document.getElementById(id).play() ;
}
originAlertの変数名は任意。既存の変数とダブらないように気を付けます。
[JavaScript|MDN]Function.prototype.apply()
これで完了。
③スマホはバイブレーションもさせようか
参考サイト:
[Qiita]JavaScriptを使い、Webブラウザでデバイスを振動(バイブレーション)させる
振動もさせたい場合は、詳しくは上記参考サイトを参照。
端的に言えば、これを追加。
if(typeof navigator.vibrate == 'function'){ navigator.vibrate(200); };
navigator.vibrate()が存在しないブラウザもあるので、エラーにならないよう囲んでおくことを忘れないように。