通知時にサウンドを鳴らす

Recipe ID: dlg-013

通知(Notification)を表示する際に、同時に音を鳴らしてユーザーの注意を引く方法を解説します。

前提条件

プラグインの追加

通知機能を利用するには notification プラグインが必要です。

npm run tauri add notification

src-tauri/src/lib.rs.plugin(tauri_plugin_notification::init()) が追加されていることを確認してください。

Permissions (権限) の設定

src-tauri/capabilities/default.jsonnotification:default 権限を追加します。

{
  "permissions": [
    ...,
    "notification:default"
  ]
}

1. フロントエンドから作成する (TypeScript)

HTML5 Audio を使用する (推奨)

アプリ側で確実に特定の音を鳴らしたい場合は、Web 標準の Audio オブジェクトを使用します。

import { sendNotification } from '@tauri-apps/plugin-notification';

async function notifyWithSound() {
  // 1. 音を鳴らす (public/alert.mp3 を配置)
  const audio = new Audio('/alert.mp3'); 
  audio.play().catch(e => console.error('音声再生エラー:', e));

  // 2. 通知を表示する
  sendNotification({
    title: 'エラー発生',
    body: 'ログを確認してください。'
  });
}

プラグインの機能を使用する

sendNotificationsound オプションを使用しますが、OS 依存性が高いです。

import { sendNotification } from '@tauri-apps/plugin-notification';

sendNotification({
  title: '完了',
  body: '処理が正常に終了しました。',
  sound: 'default' // 'default' でOS標準音が鳴る場合がある
});

2. バックエンドから作成する (Rust)

Rust 側から通知を送る際も、sound メソッドが使用可能です(こちらもサポート状況はOSに依存します)。

サウンド付き通知

use tauri_plugin_notification::NotificationExt;

app.notification()
    .builder()
    .title("Notification")
    .body("Listen carefully...")
    .sound("default") 
    .show()
    .unwrap();

補足

  • カスタムサウンド: Web 標準の Audio API を使用する方法であれば、アプリ独自の MP3 や WAV ファイルを確実に再生できます。
  • 無音通知: 逆に無音にしたい場合、OS の設定で強制的に音が鳴ることもあります。