最近、WindowsデフォルトのWebブラウザーであるedge【エッジ】には、合成音声で読んでくれる「音声で読み上げる」機能がついて、便利になりました。ただ、そのためには右上の「…」メニューを開き「音声で読み上げる」を選択するというひと手間がかかりますので、サイト上に「読み上げ」ボタンがあればいいのでは？と思い、いろいろ調べてみました。
その結果、まだ改善点は多々ありますが、何とか実験的に取り付けることができましたので、ここにその方法を記録しておきましょう。
1. 「WP Speech Contents」プラグインを入れます
まず、「WP Speech Contents」というプラグインを入れます。下記のサイトからダウンロードして、ワードプレスのプラグイン新規追加からアップロードしてインストールします。
このプラグインの作者のサイトでしょうか？
2. Cocoon Child: javascript.jsにプログラムを追加します
const text = document.querySelector('#text2')
const voiceSelect = document.querySelector('#voice-select')
const speakBtn = document.querySelector('#speak-btn')
var i1=-1
var i2=-1
var i3=-1
// selectタグの中身を声の名前が入ったoptionタグで埋める
function appendVoices() {
// ① 使える声の配列を取得
// 配列の中身は SpeechSynthesisVoice オブジェクト
const voices = speechSynthesis.getVoices()
voiceSelect.innerHTML = ''
voices.forEach(voice => { // アロー関数 (ES6)
// 日本語以外の声は選択肢に追加しない。
if(!voice.lang.match('ja')) return
//if(!voice.name.match('Japan')) return
const option = document.createElement('option')
option.value = voice.name
option.text = `${voice.name} (${voice.lang})` // テンプレートリテラル (ES6)
voiceSelect.appendChild(option)
//option.setAttribute('selected', voice.default)
i1=i1+1
//Natural付の音声が一番上手に読むのでそれを選択する処置。ない場合は次に聞きやすいSayakaを選択。
if(voice.name.indexOf('Natural') !==-1){
i2=i1
option.setAttribute('selected', true)
}
else if(voice.name.indexOf('Sayaka') !==-1){
i3=i1
option.setAttribute('selected', true)
}
});
}
appendVoices()
// ② 使える声が追加されたときに着火するイベントハンドラ。
// Chrome は非同期に(一個ずつ)声を読み込むため必要。
speechSynthesis.onvoiceschanged = e => {
appendVoices()
if(i2 !==-1){
voiceSelect.options[i2].selected = true;
}
else if(i3 !==-1){
voiceSelect.options[i3].selected = true;
}
else{
voiceSelect.options[0].selected = true;
}
}
3. wp-speech-contents/js/wp_speech_contents.js に追加
続いて、プラグインのファイルにプログラムを追加します。書き込みは、ワードプレスの管理画面の「プラグイン」の「プラグインエディター」を開き、右上の「編集するプラグインを選択」で「WP Speech Contents」を選択すると該当するファイルにたどり着けます。下記を書き込みます。
書き込み位置は15行目くらいにある「speechSynthesis.speak( synthes );」という行の直前に挿入します。
// 選択された声を指定
synthes.voice = speechSynthesis
.getVoices()
.filter(voice => voice.name === voiceSelect.value)[0]
// 発言を再生 (発言キュー発言に追加)
「speechSynthesis.speak( synthes );」を含めると下記のようになるかと思います。
// 選択された声を指定
synthes.voice = speechSynthesis
.getVoices()
.filter(voice => voice.name === voiceSelect.value)[0]
// 発言を再生 (発言キュー発言に追加)
speechSynthesis.speak( synthes );
});
4. wp-speech-contents/wp-speech-contents.phpに追加
さらに、プラグインのphpファイルの「public function get_box ()」の中の一行目に「<select id=”voice-select”></select>」を挿入します。
public function get_box () {
$button = '<div class="wp_speech_contents-box"><select id="voice-select"></select>';
$button .= $this->get_start_button();
$button .= $this->get_cancel_button();
$button .= '</div>';
return $button;
}記事のタイトルを読ませるために「public function init()」の中の「$content = apply_filters( ‘wp-speech-contents_content’, strip_tags($post->post_content) );」の次に「$content = get_the_title() .$content;」と記入するとよいでしょう。
$content = apply_filters( 'wp-speech-contents_content', strip_tags($post->post_content) );
$content = get_the_title() .'。'.$content;/*記事のタイトルを読む*/5. Cocoon Child: スタイルシート (style.css)に追加
/*読み上げ機能関連*/
#voice-select{
/*display: none;音声選択欄を表示しない場合に有効にする*/
width:100%;
}
/*読み上げボタンを右側にする。左のままでよければ記入しなくてもよい*/
.wp_speech_contents-box{
text-align: right;
}6. 読み上げボタンを表示しないページの編集ページの下記のCSSに追加
読み上げボタンを表示したくない場合はそれぞれのページの固有のCSSを記入する欄に記入します。
.wp_speech_contents-box{
display: none;
}7. JavaScript コードの最適化を解除します
なかなか動かなかったので試しに高速化のために設定していた「Autoptimize」というプラグインのJavaScript コードの最適化を無効にしたら動くようになりました。もし動かない場合は、高速化設定などにある、JavaScriptの圧縮解除などしてみるといいでしょう。
これでなんとか読み上げボタンが表示されるかと思います。今のところ、iPadやedge以外のWebブラウザーでも大丈夫でした。ただ、それぞれの環境で選択できる音声の種類には違いがあり、また、選択した音声により、漢字を正しく読んでくれるものもあれば間違って読むものもありました。一番上手に読んでくれるのはWindows10パソコンでの標準のウェブブラウザのedgeで表示される「Microsoft Nanami Online (Natural)」という合成音声でした。
できれば、読まれている部分をハイライトにしたり、読むにつれてページが自動的にスクロールする機能を付与できれば最高なのですが、技術不足でいまのところ難しいでした(‘_’)
最後に、特に参考になったサイトをご紹介しておきましょう。
