Win11: 文章読み上げ | A Glimpse of in The Night

A Glimpse of in The Night

まだChrome使ってるんですか?

テーマ:

Win11: ナレーター

  1. Windowsキー+Iで設定画面を出す
  2. アクセシビリティをクリック
  3. ナレーターをクリック
  4. 自然な声を追加

Win11にはナレーターという機能があって、画面の文字を読み上げてくれる機能があります。Edgeは右クリックで「音声で読み上げる」というメニューがあり、ナレーターで追加したMicrosoft Nanami (Natural) - Japanese (Japan) とかMicrosoft Sayaka (Natural) - Japanese (Japan)を選ぶことが可能です。※Chrome、Braveにはこのメニューはありません。

 

 

ChatGPTの音声エンジン

クロスプラットフォームなChatGPTはMicrosoftに依存しない自前の音声エンジンを持っているようです。

  1. 右上の設定ボタンをクリック
  2. スピーチをクリック
  3. 一覧から名前を選ぶ 例:Maple

メープルさんはちょっと巻き舌の女性ですw

 

 

音読さんは多言語対応

音読さんというウェブページはオランダ語やドイツ語などたくさんの言語に対応しています。どれだけネイティブに近いのか分かりませんが、試してみてください。

https://ondoku3.com/ja/

 

 

 

HTMLの読み上げページ

ChatGPTにこんなものを作らせてみました。ブラウザで読み上げができます。

 

  1. このHTMLをコピーして「読み上げ.html」として保存
  2. ブラウザで開いてテキスト入力、Voice選択、読み上げるをクリック

 

ーーーーー ここからコピー -----

 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>音声読み上げ</title>
</head>
<body>
  <h1>音声読み上げを試す</h1>

  <!-- 音声選択ドロップダウン -->
  <label for="voiceSelect">声を選んでね: </label>
  <select id="voiceSelect">
    <option value="">選択してください</option>
  </select>

  <!-- テキストエリア -->
  <br><br>
  <textarea id="text" rows="10" cols="30" placeholder="読み上げるテキストを入力してね..."></textarea>
  <br><br>
  
  <!-- 読み上げボタン -->
  <button onclick="speakText()">読み上げる</button>
  <button onclick="stopSpeech()">停止</button>

  <script>
    const voiceSelect = document.getElementById("voiceSelect");
    const textArea = document.getElementById("text");
    let voices = [];
    let currentUtterance = null;

    // 音声をリストに追加する関数
    function populateVoices() {
      voices = speechSynthesis.getVoices().filter(v => v.lang === "ja-JP");
      voiceSelect.innerHTML = "";
      voices.forEach((voice, i) => {
        const option = document.createElement("option");
        option.value = i;
        option.textContent = voice.name;
        voiceSelect.appendChild(option);
      });
    }

    // テキストを音声で読み上げる関数
    function speakText() {
      if (currentUtterance) {
        speechSynthesis.cancel();  // もし以前の読み上げがあればキャンセル
      }

      const msg = new SpeechSynthesisUtterance(textArea.value);
      const selectedVoice = voices[voiceSelect.value];
      if (selectedVoice) msg.voice = selectedVoice;

      currentUtterance = msg;
      speechSynthesis.speak(msg);
    }

    // 音声の取得が完了したときに呼び出す
    setTimeout(populateVoices, 2000);  // 初期化のため2秒遅延させてみる

    // 音声リストが変更されたときに呼び出されるイベント
    speechSynthesis.onvoiceschanged = () => {
      populateVoices();
    };

    // 読み上げを停止する関数
    function stopSpeech() {
      speechSynthesis.cancel();  // 読み上げを停止
      currentUtterance = null;   // 現在の発話をリセット
    }
  </script>

</body>
</html>

 

ーーーーー ここまでコピー -----

 

 

Javascript

ブラウザでF12を叩くと開発者モードが開きます

Consoleをクリックしてallow pastingと入力してENTER

次のjavascriptをペーストしてENTER

 

 

const utter = new SpeechSynthesisUtterance("Nanamiだよ。今日はエヴァで爆出ししちゃった");
utter.voice = speechSynthesis.getVoices().find(v => v.name === "Microsoft Nanami (Natural) - Japanese (Japan)");
speechSynthesis.speak(utter);
 

 

 

ところで、何でまた音声読み上げにこんなに時間をかけたのかっていう肝心の話がありますが、それは秘密ですwwwwww