テキスト読み上げシステムの書き方・使い方
= Speech Synthesis API =

 音声合成システム 
 テキスト読み上げの書き方 
 憲法・ポツダム宣言などを読む 
  • ここでは、「音声合成システムSpeech Synthesis API 」の書き方を紹介します。
  • <head></head> に書くスクリプト」と「<body></body> に書くコード」を設定すれば使うことができます。コピーしてご利用ください。
  • 事前に文章を用意する方法も解説しています。適宜ご利用ください。
  • その他、適宜 CSS などで調整してください。
《 <head></head> に書くスクリプト 》

<!-- 読み上げのスクリプト -->
<script>
function lng(prm) { lang = prm ; }
function speech() {
var synthes = new SpeechSynthesisUtterance();
synthes.volume = form.volume.value / 10 ;
synthes.rate = form.rate.value / 10 ;
synthes.pitch = form.pitch.value / 10 ;
synthes.text = form.text.value ;
synthes.lang = lang ;
synthes.voiceURI = "native" ;
speechSynthesis.speak(synthes);
}
function pause() { speechSynthesis.pause() ; }
function resume() { speechSynthesis.resume() ; }
function cancel() { speechSynthesis.cancel() ; }
window.onload = function () {
ini();
}
</script>

<!--「textarea」にデフォルトで文章をセットしておく場合のサンプル。必要に応じて -->
<script>
function ini(){
lang ="ja-JP" ;
form.text.value ="おはようございます。" + "\n" + "Good Morning" + "\n\n" +
"これは、入力した文章を対応する言語で読み上げるシステムです。" + "\n" +
"読み上げる文章をここに貼りつけ、対応する言語をチェックしてください。" ;
}
</script>

<!-- 事前に用意した文章をテキストエリアに表示させるスクリプト。必要に応じて -->
<script>
function set(word) { form.text.value = word ; }
</script>
<!-- 用意する文章の、body 内での書き方のサンプル
<a href="javascript:void(0)" onclick="set('おはよう')">おはよう</a>
-->

《 <body></body> に書くコード 》

<form name="form">
<!-- 使用する言語。必要な言語をセットしてください -->
<label><input type="radio" value="ja-JP" name="r1" onclick="lng('ja-JP')" checked>日本語</label>
<label><input type="radio" value="en-US" name="r1" onclick="lng('en-US')">英語:米国</label>
<label><input type="radio" value="en-US" name="r1" onclick="lng('en-GB')">英語:英国</label>
<label><input type="radio" value="fr-FR" name="r1" onclick="lng('fr-FR')">フランス語</label>
<label><input type="radio" value="it-IT" name="r1" onclick="lng('it-IT')">イタリア語</label>
<label><input type="radio" value="de-DE" name="r1" onclick="lng('de-DE')">ドイツ語</label>
<label><input type="radio" value="es-ES" name="r1" onclick="lng('es-ES')">スペイン語</label>
<label><input type="radio" value="es-ES" name="r1" onclick="lng('ru-RU')">ロシア語</label>
<label><input type="radio" value="pt-PT" name="r1" onclick="lng('pt-PT')">ポルトガル語</label>
<label><input type="radio" value="nl-NL" name="r1" onclick="lng('nl-NL')">オランダ語</label>
<label><input type="radio" value="tr-TR" name="r1" onclick="lng('tr-TR')">トルコ語</label>
<label><input type="radio" value="sv-SV" name="r1" onclick="lng('sv-SV')">スウェーデン語</label>
<label><input type="radio" value="el-EL" name="r1" onclick="lng('el-EL')">ギリシャ語</label>
<label><input type="radio" value="ko-KR" name="r1" onclick="lng('ko-KR')">韓国語</label>
<label><input type="radio" value="zh-CN" name="r1" onclick="lng('zh-CN')">中国語</label>
<label><input type="radio" value="hi-HI" name="r1" onclick="lng('hi-HI')">ヒンディー語</label>
<label><input type="radio" value="hi-HI" name="r1" onclick="lng('id-ID')">インドネシア語</label>
<label><input type="radio" value="th-TH" name="r1" onclick="lng('th-TH')">タイ語</label>
<!-- テキストエリア -->
<textarea name="text" rows="10" style="font-size:100%; width:100%"></textarea>
<!-- 音量などの設定と、各種実行ボタン -->
音量:<input type="range" name="volume" max="10" min="0" step="1">
&nbsp;&nbsp;速度:<input type="range" name="rate" max="20" min="0" step="1">
&nbsp;&nbsp;音の高さ:<input type="range" name="pitch" max="20" min="0" step="1">
<br>
<input type="button" onclick="speech()" value="読み上げ" title="読み上げ" alt="読み上げ"> 
<input type="button" onclick="pause()" value="一時停止" title="一時停止" alt="一時停止"> 
<input type="button" onclick="resume()" value="再開" title="再開" alt="再開" > 
<input type="button" onclick="cancel()" value="停止" title="停止" alt="停止"> 
<input type="reset" value="入力リセット"> 
<input type="button" name="Submit" value="初期設定に戻す" onClick="location.reload(true);" title="初期設定に戻す" alt="初期設定に戻す">
</form>

<!-- ブラウザーが「Speech Synthesis」をサポートしているかどうかのメッセージ。必要に応じて -->
<!-- body 内の、表示させたい場所に書いてください -->
<p id="msg"></p>
<script>
var supportMsg = document.getElementById('msg');
if ('speechSynthesis' in window) {
supportMsg.innerHTML = 'お使いのブラウザーは、<strong>テキスト読み上げ(Speech Synthesis)をサポートしています。</strong>';
} else {
supportMsg.innerHTML = 'お使いのブラウザーは、<strong>テキスト読み上げ(Speech Synthesis)をサポートしていません。<br><a href="https://www.google.com/chrome/browser/desktop/index.html" target="_blank">「Chrome」をお試しください。</a></strong>.';
supportMsg.classList.add('not-supported');
}
</script>

《 完成サンプル 》

テキスト読み上げシステム

[ Speech Synthesis API ]

様々な言語の文章を読み上げ、音声で聞くことが出来ます。
Speech Synthesis API を利用しています。翻訳システムではありません。

  • Speech Synthesis という仕組みを利用しています。
  • ブラウザーによっては利用が出来ないか、設定が必要な場合があります。

【読み上げる文章の言語】

 音量:  速度:  音の高さ:
            

《言語サンプル》 言語のサンプルとして、「おはようございます」を各国語で列記しました。各言語をクリックすると入力枠に表示されます。対応する言語を選択して『読み上げ』ボタンをクリックしてください。



  • 日本語で、「都心にある会社」と入力すると、「都心」を「みやこごころ」と読み上げました。また、「吾輩は猫である」の中に「恐しい」という言葉がありますが、これは「きょうしい」と読み上げられます。「恐ろしい」と送り仮名を振らないと正しく読み上げないようで、漢字の読み上げは難しいようです。参考としてご利用ください。


おすすめサイト・関連サイト…

Last updated : 2024/06/29