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に衝撃を受けた。それなりに汎用性が高そう。
関連記事
-
-
JavaScriptの「Day.js」ライブラリで日付の比較を行う方法
JavaScriptの日時・時刻用ライブラリ「Day.js」を用いて日付の比較を ...
-
-
JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)
JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...
-
-
JavaScriptにて「loglevel」ライブラリを利用して環境及びレベルによりログを出し分けする方法
JavaScriptにて何らかの確認の際にconsole.logを使うことが多い ...
-
-
JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について
JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...
-
-
JavaScriptのリッチなalert / confirmぽいウィンドウを表示する「sweetalert2」の利用方法
JavaScriptのalert / confirmはブラウザによって表示位置や ...