iT邦幫忙

DAY 27
0

Chrome Extension 學習筆記系列 第 27

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 時將沒有反應。筆者的解決方法是將文字切割再分段念。


上一篇
Chrome Extension 開發實戰篇 26 - 通知訊息
下一篇
Chrome Extension 開發實戰篇 28 - 客製化選項設定
系列文
Chrome Extension 學習筆記30

尚未有邦友留言

立即登入留言