好きな言葉をしゃべってもらう！ SpeechSynthesis API の使い方【JavaScript】｜ProgLearn

みなさん、こんにちは。どんぶラッコです。

本日は、みなさんと SpeechSynthesis API の使い方をご紹介しようと思います！

実は JavaScriptには標準でたくさんの Web API が用意されています。

Experimental (実験的な機能)に分類されているものも多いですが、なんだかワクワクしてしまいますね！

今日はそんなExperimentalな機能の一つである SpeechSynthesisAPI をご紹介しようと思います。

PCに搭載されている合成音声を用いて、テキストの読み上げを行ってくれる機能を簡単に作ることができてしまいます！

Experimental と書かれている通り、一部のブラウザでは機能しません。

2021年3月22日現在の対応状況は↓↓こんな感じです。

ChromeやEdgeでは動作確認をすることができる、とのことなので早速実装してみましょう！

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script
        src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
        crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
    <title>Web Speech API のサンプル</title>
</head>
<body>
    <section class="section">
        <h1 class="title">Web Speech API のサンプル</h1>
        <div class="field is-grouped">
            <p class="control is-expanded">
                <input id="text" class="input" type="text" placeholder="喋って欲しい文章を入力...">
            </p>
            <p class="control">
                <a id="send" class="button is-info">
                    送信する
                </a>
            </p>
        </div>
    </section>
<script>
const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance();
utterance.lang = 'ja-JP';

$('#send').on('click', function () {
    const text = $('#text').val();
    utterance.text = text
    synth.speak( utterance );
});

</script>
    
</body>
</html>

JavaScriptの部分だけ抜き出してみましょう。

const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance();
utterance.lang = 'ja-JP';

$('#send').on('click', function () {
    const text = $('#text').val();
    utterance.text = text
    synth.speak( utterance );
});

SpeechSynthesisUtterance で発話 (utterance) に関する設定を書き込み、その上で speechSynthesis オブジェクトに渡してあげます。

あとは、ボタンがクリックされたら話すようにすれば完成です！めちゃめちゃ簡単ですね。

ちなみに、ボタンを押して再生… にしないと、webブラウザでは動きません。ブラウザがわのセキュリティ強化により、ユーザ自身が音声を再生する意思を確認しないと再生されない仕様になっています。

const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance();
utterance.lang = 'ja-JP';

// ページ読み込み時に実行するとエラーが発生する
utterance.text = 'こんにちは';
synth.speak( utterance );

昔のサンプルコードを読むと、このエラーで動かなくなっているものが多いです。

みなさんもぜひチャレンジしてみてください♪