◆当ページにはプロモーションが含まれています

JavaScript

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

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

本日は、みなさんと 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 );

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


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

エンジニアにおすすめ転職サイト

マイナビIT AGENT
迷ったらまずはココ。求人数が多いため希望や条件にマッチする求人が見つかる!

レバテックキャリア
担当者のレベルが高い。エンジニア特化で15年の実績がある実績で初回提案での内定率驚異の90%!

JOIN
副業やフリーランスとして高額報酬案件を見つけるならJOIN。未経験者でも案件獲得実績豊富が強み!

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
一緒によく読まれている記事

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です