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

<!-- 読み上げのスクリプト -->
<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>
-->

<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>