勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法

   2024/03/13  JavaScript

プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいように通知音を鳴らしたい。通知自体はPush.jsというライブラリを、通知音はWeb Audio APIというJavaScriptのAPIで対応できた。以下に対応方法をメモ。

 

サンプル

https://taitan916.info/sample/push/

clickボタンを押すと通知が表示され、通知音が鳴る。

 

ソース

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>プッシュ通知テスト</title>
</head>
<body>

	<input type="button" value="click" id="push-btn">

	<script type="text/javascript" src="//code.jquery.com/jquery-3.5.1.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.12/push.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#push-btn').click(function(){
				Push.create('タイトル', 
					{
						body: '本文',
						timeout: 5000,
					}
				);

				//webオーディオAPIコンテキストを生成
				const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

				//オシレーターノードを生成
				const oscillator = audioCtx.createOscillator();

				//ゲインの生成
				const gainNode = audioCtx.createGain();

				//webオーディオAPIコンテキストと接続?(ここがよく分からない)
				oscillator.connect(gainNode);
				gainNode.connect(audioCtx.destination);

				//音量
				gainNode.gain.value = 0.2;

				//通知音のタイプ
				oscillator.type = 'sine';

				//通知音スタート
				oscillator.start();

				//通知音ストップ
				oscillator.stop(0.2);
			});
		});

	</script>
</body>
</html>

 

Push.js

以下が公式サイトになり、オプション等リファレンスが確認できる。

https://pushjs.org/

尚、対応ブラウザに関して公式サイトではそのような案内を見つけられなかったが、とあるサイトにて「Chrome / Safari / Firefox / Edge」が対応、「iOSやIE」が非対応という情報を見かけた。

 

Web Audio API

以下がリファレンスとなる。

https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API

 

所感

mp3とかの音声ファイルを用意せずともブラウザ上で音声を流せるWeb Audio APIに衝撃を受けた。それなりに汎用性が高そう。

 - JavaScript

  関連記事

表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法

どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...

ローソク足のグラフをJavaScriptで描写する方法(highstock)

株価か仮想通貨などの値動き(チャート)を図表とするローソク足のグラフを何らかの方 ...

JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)

JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...

JavaScriptで画像に光沢をつける(glossy.js)

凄く簡単に光沢がつけられるライブラリがあったのでメモ。 ライブラリを呼び出してc ...

JavaScriptライブラリChart.jsでグラフの描写する方法

JavaScriptでグラフを描写する必要があり、普段はHighchartを使用 ...