[はてなブログ] Speech Synthesis API のテンプレート

speech.html

# 音声設定

音声の再生は環境に依存します。以下に選択肢が出ない言語は再生できません。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/7shi/web-tts@0.11/speech.min.css">
<script src="https://cdn.jsdelivr.net/gh/7shi/web-tts@0.11/speech.min.js"></script>
<table id="voice_table"></table>
<script>
webTTS.initVoices({
    ja: { name: "日本語", prefer: "Nanami Online", test: "こんにちは" },
    en: { name: "英語", country: "US", test: "hello", pitch: 1 },
    fr: { name: "フランス語", country: "FR", test: "bonjour", pitch: 1 },
}, voice_table);
</script>

# 読み上げ

漢字の誤読が見られる場合、`<span s="読み方">` で注釈を加えます。

<pre hidden><code id="source1">
これは<span s="なん">何</span>ですか？
What is this?
Qu'est-ce que c'est ?

これはペンです。
This is a pen.
C'est un stylo.
</code></pre>
<table id="button1"></table>
<table id="text1"></table>
<script>
const source1Table = webTTS.convertSource(source1);
webTTS.initTable(source1Table, button1, text1, "ja", "en");
</script>

• Usage: Web Speech API のテンプレート
• Repository: https://github.com/7shi/web-tts