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でダミー画像(プレースホルダー画像)を表示する「Holder.js」ライブラリの利用方法
サイトの開発段階で「本番用の画像はまだ用意できていない」等の理由によりダミー画像 ...
-
-
JavaScriptで小数の計算をする際にずれ(誤差)を無くす方法(decimal.js)
JavaScriptで小数の計算をすると値がずれる(誤差が発生する)ことがあった ...
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法
あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...
-
-
jQueryプラグインでクリップボードにコピーする方法(clipboard.js)
ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...
-
-
JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法
先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...