Chrome Extension 開發實戰篇 27 - tts 語音

有了通知訊息之後，接下來要來實作這個專案最重要的語音部分了。

從通知訊息播放

通知訊息會告知使用者目前最新的 RSS 文章，既然有通知，當然就需要有後續的動作，所以將透過通知訊息上的播放按鈕讓使用者播放 RSS。
Step 1. 建立通知訊息時，加入按鈕。

event_page.js

var options = {
    ...
  type: 'basic',
  iconUrl: 'icons/icon48.png',
  title: '通知標題',
  message: '通知訊息',
    buttons: [
    {
        title: '播放'
    }
  ],
  ...
};
chrome.notifications.create('myNotificationId', options, function () {});

溫馨小提醒：一個通知訊息最多能提供 2 個按鈕。

Step 2. 加入按鈕的監聽事件。

event_page.js

chrome.notifications.onButtonClicked.addListener(function (notificationId, buttonIndex) {
  if (notificationId === 'myNotificationId') {
    if (buttonIndex === 0) {
      // to do something
    }
  }
});

Step 3. 使用 tts 語音播放。

event_page.js

chrome.tts.speak('要播放的文字', {
  lang: 'zh-CN', 
  rate: 1.0, 
  enqueue: true
}, function() {
  // callback
});

說明：enqueue 為 true 時，文字會先暫存，等播放中的文字念完後再接著念。

從彈出頁面播放

通知訊息只會停留幾秒後就自動關閉了，所以在彈出頁面的 RSS 文章列表需提供播放按鈕。
方法一：直接在彈出頁面呼叫 chrome.tts.* 的 api。

popup.js

chrome.tts.speak('要播放的文字', {
  lang: 'zh-CN', 
  rate: 1.0, 
  enqueue: true
}, function() {
  // callback
});

方法二：在彈出頁面呼叫事件頁面的 function。

popup.js

chrome.runtime.getBackgroundPage(function(window) {
  window.SpeakText('要播放的文字');
});

event_page.js

function SpeakText(text) {
  chrome.tts.speak(text, {
    lang: 'zh-CN', 
    rate: 1.0, 
    enqueue: true
  }, function() {
    // callback
  });
}

可能會遇到的問題

語音念到一半就停了：chrome.tts.speak 可念的長度有限，如果超過會自動停止，且在再次呼叫 chrome.tts.speak 時將沒有反應。筆者的解決方法是將文字切割再分段念。

結語：

善用 tts 語音功能可以增加互動性。如果您有問題，歡迎在下方留言。謝謝！