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に衝撃を受けた。それなりに汎用性が高そう。
関連記事
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法
あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...
-
-
横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法
横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...
-
-
JavaScriptの日時・時刻用ライブラリ「Day.js」の利用方法について
JavaScriptの日時・時刻用を取り扱う際、PHPと比べると(個人的には)使 ...
-
-
JavaScriptでtableタグをエクセルファイル(xlsx)としてダウンロードさせる方法
table内のデータを何らかのファイルでダウンロードさせたい。通常PHPでCSV ...
-
-
JavaScriptにて時間や長さの単位を変換及び計算できる「mathjs」ライブラリの利用方法
JavaScriptにて時間の単位を「分->時」に、長さの単位を「mm-& ...