こんにちは、株式会社カケハシでおくすり連絡帳 Pocket Musubiの開発を担当している渡辺です。

先日、Pocket Musubi で処方せん送信機能をリリースいたしました。

処方せん送信は手元の Pocket Musubi から処方せんの画像を撮影して事前にアップロードすることにより、スムーズに薬局で服薬指導を受けて薬を受け取ることができます。

この処方せん送信機能において、薬局内で処方せんを受け取ったことを薬剤師の先生が気づくように、ブラウザの通知を利用しました。

今回は、ここで利用した Web の標準技術である Web Notification と Web Audio について記述します。

Web Notification とは

ブラウザでデスクトップ通知するための仕様です。下記のような通知に見覚えありませんか？

スクリーンショット 2021-09-30 15 24 15

これは、JavaScript で Notification API を叩くことによって、ブラウザがユーザーに通知をしてくれます。

ただ、通知には許可が必要です。下記のようなダイアログを Web サイトで見た方もいるのではないでしょうか？

スクリーンショット 2021-09-30 11 15 37

こちらは、通知の許可(Permission)を求めるダイアログです。通知の Permission の状態は 3 つあります。

granted: このオリジンでの通知を許可している
denied: このオリジンでの通知を許可していない
default: このオリジンでは通知を使うかまだ決めていない

ブラウザで実行される JavaScript に、Notification.requestPermission()を実行すると、ユーザーに許可を求めることができます。

通知の表示のコード例を下記に示しておきます。

function notify() {
  switch (Notification.permission) {
    case "granted": //通知を許可している
      const item = new Notification("こんにちは");
      break;
    case "denied": //通知を許可していない
      break;
    default:
      //通知をしていいいかをユーザーに問い合わせる
      Notification.requestPermission().then((permission) => {
        if (permission === "granted") {
          const item = new Notification("こんにちは");
        }
      });
      break;
  }
}

このように、簡単に通知を実装できます。

Web Audio を使う

ただ通知するだけ、だと見落とす可能性がありますよね。そこで、音声を流して作業中でも気がついてもらえるようにしようと考えました。

ここで音声を再生するために、ブラウザの Web Audio API を利用します。 Web Audio API は、簡単な話、Web で Audio を扱える API です(そのまんまですね。)

音声を鳴らすだけだったら、下記のコードだけで動きます。

const audio = new Audio("./audio.mp3");
audio.play();

Web Audio と Web Notification の組み合わせ

それでは、通知の時に音声を鳴らしてみましょう。

お好みの音声データを用意していただき、下記のようにshowイベントで音声を流す処理を書いてあげれば、通知の時に音声が流れます。

notification.addEventListener("show", () => {
  const audio = new Audio("./audio.mp3");
  audio.play();
});

注意点

ただし、Web Audio には制限があります。

特に、自動再生(AutoPlay)には厳しい制約がつきます。 Chrome では AutoPlay の仕様が 2018 年 4 月より変わり　以下の条件が必要になりました。 (参照: https://developer.chrome.com/blog/autoplay/ )

ミュートした音声は自動再生が可能
音声の自動再生は以下の条件を満たさないといけない
- ユーザーインタラクション(クリックやタップ)
- PWA でデスクトップにインストールした場合
- Media Engagement Index で閾値を超えた場合(chrome://media-engagement/で確認できます)

上記により、Audio はユーザー操作がないと、音声の自動再生はしてくれません。