サイトに音声で読み上げるボタンを付ける方法－その2

サイト全体を読みあげるボタンを付ける方法については下記に記録しました。

サイトに音声で読み上げるボタンを付ける方法

最近、WindowsデフォルトのWebブラウザーであるedge【エッジ】には、合成音声で読んでくれる「音声で読み上げる」機能がついて、便利になりました。ただ、そのためには右上の「…」メニューを開き「音声で読み上げる」を選択するというひと手間がかかりますので、サイト上に「読み上げ」ボタンがあればいいのでは？と思い、いろいろ調べてみました。その結果、まだ改善点は多々ありますが、何とか実験的に取り付けることができま...

ピーコロミュージアム

ここでは、上記の設定に加えて、「クリック範囲読み上げ」ボタンを取り付ける方法を記録します。全体ではなく、一部分だけ読んでもらいたい、という場合に、クリックした部分の節だけ読み上げられるというボタンです。

1. Cocoon Child: javascript.jsに追加します

テーマのPHPファイルに下記のコードを記入します。

function load() {
        $('#offf').prop('disabled',false);//ボタン有効化無効化処理
	$('#onn').prop('disabled',true);
	$('#wpSpeechContentsStartButton').prop('disabled',true);
	$('#wpSpeechContentsCancelButton').prop('disabled',true);
!function () {
    function e(e) {
        return document.querySelectorAll(e)
    }
    function n(e, n) {
        Array
            .prototype
            .forEach
            .call(e, function (e, t, c) {
                n.apply(this, [e, t, c])
            })
    }
    function t(e) {
        for (var n, t =[], c = document.createTreeWalker(e, NodeFilter.SHOW_TEXT, null, !1); n = c.nextNode();) 
            t.push(n);
        
        return t.filter(function (e) {
            return null === e.nodeValue.match(/^\s+$/)
        })
    }
    function c(e) {
        var n = [
            "SCRIPT",
            "P",
            "H1",
            "H2",
            "H3",
            "H4",
            "H5",
            "H6",
            "DT",
            "A",
            "ABBR",
            "ACRONYM",
            "B",
            "BASEFONT",
            "BDO",
            "BIG",
            "BR",
            "CITE",
            "CODE",
            "DFN",
            "EM",
            "FONT",
            "I",
            "IMG",
            "INPUT",
            "KBD",
            "LABEL",
            "Q",
            "S",
            "SAMP",
            "SELECT",
            "SMALL",
            "SPAN",
            "STRIKE",
            "STRONG",
            "SUB",
            "SUP",
            "TEXTAREA",
            "TT",
            "U",
            "VAR",
            "TIME"
        ];
        e.forEach(function (e) {
            var t = document.createElement("span"),
                c = e.parentNode;
            n.indexOf(c.tagName) > -1 || (t.className = "______span______", t.style.cssText = "display: inline !important;", t.appendChild(document.createTextNode(e.nodeValue)), e.parentNode.replaceChild(t, e))
        })
    }
    function o(e) {
        var n = new SpeechSynthesisUtterance;
        n.volume = 1,
        n.rate = 1,
        n.pitch = 1,//読むスピードの設定
        n.text = e,
	n.voice = speechSynthesis
      		.getVoices()
		.filter(voice => voice.name === voiceSelect.value)[0]//音声の設定
        n.lang = "ja-JP",
        window.speechSynthesis.cancel(),
        window.speechSynthesis.speak(n)
    }
    function a() {
        c(t(document.body));
        var a = document.createElement("style");
        a.innerHTML = ".__speeching__{ color: #2B2B2B; background-color: rgba(255,245,157,0.90); }",
        document.querySelector("head").appendChild(a);//ハイライト設定
        var r = e("body *:not(script)"),
            i = document.createElement("span"),
            s = i;
        n(r, function (e) {
            e.addEventListener("click", function (e) {
                return e.stopPropagation(),
                this === s
                    ? (window.speechSynthesis.cancel(), s.classList.remove("__speeching__"), void(s = i))
                    : (o(this.innerText), s.classList.remove("__speeching__"), s = this, void s.classList.add("__speeching__"))
            })
        })
    }
    a()
}();
	};

//------------------リロードして機能停止-------------------

function endload() {
	 location.reload();//再読み込みする
	};

一度読み込んだscriptの実行は削除できないようなので、範囲読上機能を停止するために、ページを再読み込みさせています。

2. wp-speech-contents/wp-speech-contents.phpに追加します

つづいて、「wp-speech-contents」プラグインのPHPの「public function get_box ()」に下記のコードを追加します。（「//追加する」の行）

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.= '<input type="button" value="クリック範囲読上機能ON" id="onn" onclick="load();">';
//追加する
	$button.= '<input type="button" value="範囲読上機能OFF" id="offf" onclick="endload();">';
//追加する
        $button .= '</div>';
        return $button;
	
    }

3. wp-speech-contents/js/wp_speech_contents.jsに追加します

さらに、「wp-speech-contents」プラグインのJSの「jQuery(function($)」の部分に下記のコードを追加します。

jQuery(function($){
    var $startButton = $('#' + wp_value.startButtonID);
    var $cancelButton = $('#' + wp_value.cancelButtonID);
	$('#offf').prop('disabled',true);//追加する

4. 操作方法など

これで上の方に「クリック範囲読上機能ON」と「範囲読上機能OFF」が表示されるかと思います。

ボタンを押さずに最初からONにしたい場合は、最初から付与したいページの編集ページの下の方にあるJSに下記のように記入すればよいでしょう。

window.onload = load;

ボタンを上部以外の部分につけたい場合は、その部分に下記のように記入すればよいでしょう。

<!-- wp:paragraph -->
<p><input type="button" value="クリック範囲読上機能ON" id="onn" onclick="load();"></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><input type="button" value="範囲読上機能OFF" id="offf" onclick="endload();"></p>
<!-- /wp:paragraph -->

「クリック範囲読上機能ON」を押してから、読み上げて欲しいところをタップすると読み上げられます。同じところを再度タップすると止まります。また、音声の選択欄で音声を変更することもできます。

この機能を付与するうえでとても参考になったサイトを最後にご紹介します。下記のサイトはとてもたすかりました。

テキストをクリック(タップ)するだけで読み上げ...

また一つ悩みが解決しましたよ！ ...

Freelance Journal フリーランス ジャーナル