openrec スピーチ
Splatoon が大好きで実況とかもたまにみるので Openrec の読み上げ extension を作ってみました。
インストールはこちら
openrecスピーチ
リポジトリは https://github.com/coa00/openrec_speech
読み上げエンジン
ブラウザに搭載されているspeechSynthesisをそのまま使いました。
これだけのコードで喋らせることができます。
const utterThis = new SpeechSynthesisUtterance('読み上げるよー'); |
speechSynthesis.speak(utterThis); |
チャットの更新を検知
dom の更新の検知方法ですが、今回は chrome の Extension なので実験的な MutationObserverを使うことにしました。
やることを簡単に書くと
- 増減を監視したい DOM を取得する
- 増えた時の処理を書く（MutationObserver のコールバックに設定）
ソースはこんな感じです。
// 監視したいDOM
const liveChatList = document.getElementsByClassName('js-liveChatList')[0]
// オブザーバインスタンスを作成
const chatListObserver = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
const li = mutation.addedNodes.item(1);
// li からテキストを取り出して喋らせる
});
});
// オブザーバの設定
// 子要素の増加を知りたいのでchildList
const listConfigs = { childList: true };
// 対象ノードとオブザーバの設定を渡す
chatListObserver.observe(liveChatList, listConfigs);
extension の作り方
extension には色々種類はあるのですが、今回は特定のサイトだけで動作する content_scripts にしました。
manifest.json を下記のようにします。
"content_scripts": [
{
"matches": ["https://www.openrec.tv/live/*"],
"js": ["openrec_voice.js"]
}
]
から始まるパスにアクセス時に、JS を呼び出すといった動きを実現できます。
このあたりを参考にしました。
icon のバリエーションを作るのがめんどくさい。
アイコンをストアに公開するにあたり作らないといけないのですが、地味に面倒でした。
Mac はコマンドラインでリサイズしてくれました。
sips -Z 16 source.png --out icon16.png
sips -Z 48 source.png --out icon48.png
sips -Z 128 source.png --out icon128.png
素晴らしい。
ストアに公開するのに初期費用 5 ドル必要でした。まあいいかと思って払いました。