この記事は、Azure を使ってテキストの読み上げ（音声合成、Text to Speech）を行ってみた、という話です。

実装の部分については、以下に説明が書かれた「Azure Cognitive Services」の「音声サービス」の中の「テキスト読み上げ」に関し、JavaScript版の Speech SDK を利用している形です。

そして、この後に少し補足をしますが、「ニューラルテキスト読み上げ・ニューラル音声」を使っています。

ニューラル音声に関する補足

ここで、タイトルにも書いている「ニューラル音声」について少し補足します。

上記の「言語サポート - 音声サービス - Azure Cognitive Services | Microsoft Docs」というページの「テキスト読み上げ」の項目を見ると、日本語の読み上げ設定に関して、以下の種類のものがあるようです。

ニューラル音声の「Locale / 性別 / 音声名」
- ja-JP / Female / ja-JP-NanamiNeural
- ja-JP / Male / ja-JP-KeitaNeural
標準音声の「Locale / 性別 / 音声名」　（※ 標準音声は 2024年8月31日に廃止予定とのこと）
- ja-JP / Female / ja-JP-Ayumi
- ja-JP / Female / ja-JP-HarukaRUS
- ja-JP / Male / ja-JP-Ichiro

ここで、標準音声とニューラル音声というカテゴリが出てきていますが、ニューラル音声に関しては以下のように説明されています。

ここで出てきた標準音声はとニューラル音声の関係ですが、ドキュメントを読んでいくと以下の記載があり、今後はニューラル音声に完全移行していく、という流れのようです。

公式サイト上でのテキスト読み上げのお試し

ここで、いったん公式サイト上の以下の部分を使って、テキスト読み上げを体験してみたいと思います。

●Text to Speech | Microsoft Azure
　https://azure.microsoft.com/ja-jp/services/cognitive-services/text-to-speech/#features

画面左の大きなテキストボックスには、読み上げ対象となる文章を入力します。
そして、画面右側の「言語」・「音声」・「読み上げ速度」・「ピッチ」の設定を変えたりなどして、「再生」ボタンを押してみてください。
このような簡単な操作を公式サイト上で、テキスト読み上げを手軽に体験することができます。

日本語でのテキスト読み上げ

それではここから、テキスト読み上げをプログラムで扱う準備などを進めていきます。

Azure側の準備

まずは、以下の「Azure リソースを作成する」の部分に書かれた手順でを進めます。

●音声サービスとは - Azure Cognitive Services | Microsoft Docs
　https://docs.microsoft.com/ja-jp/azure/cognitive-services/speech-service/overview#create-the-azure-resource

上記の手順の補足ですが、ポータルの「ホーム」の「リソースの作成」を押した後、「音声サービス」などといったキーワードで検索すると、以下の「音声」と書かれた項目が出ています。

それを選んだ後、以下の「作成」ボタンを押してください。

その後の設定は、上記の公式ドキュメントに書かれている通りです。

この後の手順で必要になる、キーなどが書かれた画面も以下に掲載しておきます。

プログラムを準備していく

JavaScript版の Speech SDK やサンプルについて

今回、Azure と連携した処理を行う部分は、JavaScript を用いて作ります。
具体的には、以下に書かれている JavaScript版の Speech SDK を利用します。

●microsoft-cognitiveservices-speech-sdk package | Microsoft Docs
　https://docs.microsoft.com/ja-jp/javascript/api/microsoft-cognitiveservices-speech-sdk/

その際、参考にするサンプルは以下に置かれたものです。

●cognitive-services-speech-sdk/samples/js/browser at master · Azure-Samples/cognitive-services-speech-sdk
　https://github.com/Azure-Samples/cognitive-services-speech-sdk/tree/master/samples/js/browser

そのサンプルの中の「index.html」に関し、内容を削ったものを用意していきます。

HTML＋JavaScript でプログラムを作る

先に、今回作ったプログラムを掲載してみます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Azure Cognitive Services の 音声サービスでテキスト読み上げ</title>
    <meta charset="utf-8" />
</head>
<body>
    <input type="text" id="keyText">
    <input type="text" id="regionText">
    <input type="text" id="phraseText">
    <button onclick="synthesizeSpeech()">テキスト読み上げを実行</button>
    <script
        src="https://cdn.jsdelivr.net/npm/microsoft-cognitiveservices-speech-sdk@latest/distrib/browser/microsoft.cognitiveservices.speech.sdk.bundle-min.js"></script>

    <script>
        function synthesizeSpeech() {
            const keyText = document.getElementById("keyText").value,
                regionText = document.getElementById("regionText").value,
                phraseText = document.getElementById("phraseText").value;

            let speechConfig = SpeechSDK.SpeechConfig.fromSubscription(keyText, regionText);
            speechConfig.speechSynthesisLanguage = "ja-JP";
            speechConfig.speechSynthesisVoiceName = "ja-JP-NanamiNeural";

            const synthesizer = new SpeechSDK.SpeechSynthesizer(speechConfig);
            synthesizer.speakTextAsync(
                phraseText,
                function (result) {
                    console.log(result);
                    synthesizer.close();
                    synthesizer = undefined;
                }, function (err) {
                    console.log(err);
                    synthesizer.close();
                    synthesizer = undefined;
                }
            )
        }
    </script>
</body>
</html>

ブラウザ上に上記の内容を表示させて操作していく話は、プログラムの補足を書いた後に記載していきます。まずは、上記の JavaScript のプログラムについて、少し補足しておきます。

公式サンプルを参考に SpeechSDK.SpeechConfig.fromSubscription() でキーなどを設定し、そこに日本語読み上げ用の設定を加えます。サンプルでは、日本語読み上げ用の設定で標準音声が使われていたため、その部分は上にも登場していたニューラル音声の設定を行っています。具体的には以下の部分です。

speechConfig.speechSynthesisLanguage = "ja-JP";
speechConfig.speechSynthesisVoiceName = "ja-JP-NanamiNeural";

その後、 SpeechSDK.SpeechSynthesizer() や speakTextAsync の部分で、テキスト読み上げを実行していきます。

この処理の流れの中で、いくつかの内容はユーザがテキストボックスで入力する形にしています。それについて、この後に説明していきます。

テキスト読み上げを実行する

今回作った HTMLファイルをブラウザで表示させると、以下の簡素な内容が表示されます。
左から、テキストボックスが 3つとボタン 1つが並ぶ形で、テキストボックスはデフォルトで空です。

左の 2つのテキストボックスには、Azure上で取得できる「キー」と「場所/地域」の情報を入力してください。ここが空欄だった場合や、不正な値だった場合の処理は省いているので、その点は注意してご利用ください。

そして一番右のテキストボックスは、読み上げ対象となるテキストを入力する欄なので、内容は色々なパターンのテキストを入れて試してみてください。3つのテキストボックスに、それぞれテキストを入力した後、ボタンを押すとテキスト読み上げが実行されます。

実際に、これを動作させてみた時の様子を、いかに掲載します。

#AzureCognitiveServices の音声サービスで、ニューラル音声を使った日本語のテキスト読み上げを試しました（JavaScript版の Speech SDK を利用）。

公式サンプルの内容をがっつり削ったり、少し変更をしたりしたものを使ってます。
試した内容について、この後に Qiita で公開予定です。#Azure pic.twitter.com/6nJz4IXHPZ
— you (@youtoy) October 17, 2021

おわりに

今回、Azure Cognitive Services の音声サービスで、ニューラル音声を利用した日本語のテキスト読み上げを試しました。

公式サイト上でのお試しにあったように、ピッチ等の変更もできそうですし、まだ触れてない機能がいろいろありそうなので、ドキュメントを見たり試したりなどしていければと思います。