瀏覽器語音桌面通知，Notification API

金剛小倉發表於2019-03-08
瀏覽器API

前言

之前在瀏覽Youtube時，突然看到瀏覽器右上角彈出一個通知，點選就就進到了指定視訊介面，感覺很是不錯，如果加上語音效果結合WebSocket，正好可以用到自己的畢業設計之中。

關於Notification

在MDN上的介紹是：用於向使用者配置和顯示桌面通知，且必須是在Web Worker中才能使用。更為詳細的介紹可以去看看HTML5 桌面通知：Notification API，這位大佬已經寫的很詳細了，線上demo：線上demo。

展示效果

notice

構造方法

let notification = new Notification(title, options)

引數

title：顯示的通知標題
options：設定通知的物件：其屬性包含如下：

屬性 作用
dir 控制文字的方向，自動：auto、從左到右：ltr、從右到左：rtl
lang 指定通知中所使用的語言
body 顯示的文字內容
tag 主鍵ID
icon 顯示的圖片地址

相容性

相容性

實現語音

在簡單瞭解HTML5中的Web Notification桌面通知中作者列出了silent和sound屬性可用於語音播放，但親測後並不生效。

// new Notification(title, options)
let options = {
    // 通知顯示內容
    body: content, 
    // 通知出現的時候，是否要有聲音。預設false, 表示無聲。（測試無效）
    silent: true,
    // 字串。音訊地址。表示通知出現要播放的聲音資源。（測試無效）
    sound: 'https://bs.xcang.xyz/voice/notice_test.mp3', 
    // 是否一直顯示通知
    requireInteraction: false,
    // 通知顯示的圖片
    icon: 'https://bs.xcang.xyz/image/icon.jpeg'
};
複製程式碼

因此我換了一種思路，程式碼如下：

let audio = document.createElement('audio');
// 音訊地址
audio.src = 'https://bs.xcang.xyz/voice/notice_test.mp3';
複製程式碼

我在設定完options後，直接新建一個audio元素，在使用者允許通知後操作play()就可以播放語音了，程式碼如下：

// 先檢查瀏覽器是否支援該API
if (!('Notification' in window)) {
    alert('抱歉，該瀏覽器不支援Notification API');
} else {
  let permission = Notification.permission;
  // 判斷使用者是否允許接受通知
  if (permission === 'granted') {
    // 允許通知
    let notice = new Notification(title, options);
    play && audio.play();
  } else if (permission === 'default') {
    // 繼續向使用者詢問是否允許接受通知
    Notification.requestPermission().then((res) => {
      if (res === 'granted') {
    	// 允許通知
    	let notice = new Notification(title, options);
        play && audio.play();
      }
    });
  } else {
  // 拒絕
  console.log('使用者拒絕了');
  }
}
複製程式碼

語音資源合成

語音合成：百度廣播開放平臺

結語

先附上demo原始碼。文章有任何問題大家可以隨便指出，畢竟相互學習嘛:)

相關文章