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に衝撃を受けた。それなりに汎用性が高そう。
関連記事
-
-
画像にマウスを合わせると拡大表示させる「drift」ライブラリの利用方法
amazon等ECサイトで商品画像にマウスを合わせると当該部分が拡大表示されると ...
-
-
formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)
フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...
-
-
横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法
横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...
-
-
JavaScriptにて数値のカウントアップ及びカウントダウンを表示する「countUp.js」ライブラリの利用方法
だいぶ前にバニラJSにて数値のカウントアップ及びカウントダウン表示を行う方法をメ ...
-
-
表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法
どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...