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

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

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

2020年6月23日に作成されたページです。
情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。

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

参考:
[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)