Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法
2024/03/13
プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいように通知音を鳴らしたい。通知自体は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
以下が公式サイトになり、オプション等リファレンスが確認できる。
尚、対応ブラウザに関して公式サイトではそのような案内を見つけられなかったが、とあるサイトにて「Chrome / Safari / Firefox / Edge」が対応、「iOSやIE」が非対応という情報を見かけた。
Web Audio API
以下がリファレンスとなる。
https://developer.mozilla.org/ja/docs/Web/API/Web_Audio_API
所感
mp3とかの音声ファイルを用意せずともブラウザ上で音声を流せるWeb Audio APIに衝撃を受けた。それなりに汎用性が高そう。
関連記事
-
-
jQuery UIでカレンダーピッカー(Datepicker)の利用方法
フォーム等で日付を入力する際にカレンダーピッカー機能を実装することがある。その際 ...
-
-
JavaScript / PHPにて「lz-string」を用いてデータの圧縮・展開する方法
文字数が多いGETパラメータを送信したいというケースがあった。また、送信側はJa ...
-
-
JavaScriptの「Flatpickr」ライブラリで時分のみ表示する方法
バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリでカ ...
-
-
JavaScriptのマップ用ライブラリ「MapLibre GL JS」の利用方法
あるサイトをWappalyzerで調査していた際に「MapLibre GL JS ...
-
-
バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法
サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...