ど素人から毛を生やす。<延>

jsのalert()に一律で音を追加する。

Web > javascript 2020年6月23日(最終更新:1月前)

どもです。
次に必要になったときに忘れてそうなので、備忘しておきます。

参考:
[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()が存在しないブラウザもあるので、エラーにならないよう囲んでおくことを忘れないように。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)