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

前言

以前在瀏覽Youtube時，忽然看到瀏覽器右上角彈出一個通知，點擊就就進到了指定視頻界面，感受非常不錯，若是加上語音效果結合WebSocket，正好能夠用到本身的畢業設計之中。

關於Notification

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

展現效果

構造方法

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源碼。文章有任何問題你們能夠隨便指出，畢竟相互學習嘛:)