勉強したことのメモ

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

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

  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

  関連記事

jQueryでドロワーメニューの作成

■やりたかった事 スマホ用サイトにドロワーメニューを設置したかった。 &nbsp ...

JavaScriptで数値のカンマ区切り化とカンマ区切りの解除

JavaScriptで数値を3桁ごとにカンマ区切り化したい。また、それとは逆にカ ...

jQueryのloadメソッドでファイル(ページ)を呼び出す

サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...

ajaxで複数のデータを渡したい

やりたい事はajaxで複数のデータを渡したい。 ■送信側 var data = ...

フォームの入力内容をjQueryで取得し、本文として設定した上でメーラーを起動させる方法

formで何らかを入力してもらいボタンをクリックするとメーラーが開き、先ほど入力 ...