Webページ教材開発テキスト
5-7 テキストの読み上げ（音声合成）
日本語、英語のテキストを読み上げさせることができます。
○ iPadのSafari、AndridoのChrome、WindowsのChromeとSafari
× WindowsのIEとEdge
読み上げの言語として、日本語や英語の選択の他、音量、早さ、声のトーンを変えることができます。
漢字の文章も正しく読みます。英語も結構流暢に話します。
読み上げの機能を組み込むことで教材の利便性が広がると思います。
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.js"></script>
<title>Webページ教材</title>
<style>
.tango{
background-color: #cff;
padding: 10px 10px 10px 10px;
border-radius:4px;
border:1px solid #bbd;
font-size:150%;
cursor:pointer;
}
</style>
</head>
<body>
「こんにちは、今日はとても良い天気ですね。早口言葉も話せますよ。生麦生米生卵。」
<br><br>
<span id="yomiage" class="tango">読み上げます</span>
<script>
$(function(){
$("#yomiage").on("click", function () {
playSpeech();
});
});
function playSpeech(){
var synthes = new SpeechSynthesisUtterance();
synthes.voiceURI = 'native';
synthes.volume= 1; // 音量 min 0 ~ max 1
synthes.rate = 0.8; // 速度 min 0 ~ max 10
synthes.pitch= 1; // 音程 min 0 ~ max 2
synthes.text = "こんにちは、今日はとても良い天気ですね。早口言葉も話せますよ。生麦生米生卵。";
// 話す内容
synthes.lang = "ja-UP"; // en-US or ja-UP
speechSynthesis.speak(synthes); // 発話実行
};
</script>
</body>
</html>
]]>
「ja-UP」を[en-US」に変えるだけで、英語で読み上げします。
上のプログラムの一部を変更してください。
<![CDATA[
<body>
Hello, my name is Dora. What do you want? This is convenient.
<br><br>
<span id="yomiage" class="tango">Speech</span>
<script>
$(function(){
$("#yomiage").on("click", function () {
playSpeech();
});
});
function playSpeech(){
var synthes = new SpeechSynthesisUtterance();
synthes.voiceURI = 'native';
synthes.volume= 1; // 音量 min 0 ~ max 1
synthes.rate = 0.8; // 速度 min 0 ~ max 10
synthes.pitch= 1; // 音程 min 0 ~ max 2
synthes.text = "Hello, my name is Dora. What do you want? This is convenient.";
// 話す内容
synthes.lang = "en-US"; // en-US or ja-UP
speechSynthesis.speak(synthes); // 発話実行
};
</script>
</body>
</html>
]]>
(3) テキストボックスの文を読み上げる
サンプルはこちら
テキストボックスに入力されている文を読み上げます。
読み上げの速度、音程（ピッチ）、音量を調節できます。
読み上げの言語を「日本語」「英語」から選択できるようにします。
「日本語」で英文を読み上げさせると、いかにも日本人が英文を読んでいるようなローマ字読みになります。
「英語」では日本文を読み上げしません。
<![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webページ教材</title>
<style>
</style>
</head>
<body>
<form>
<input id="myText" size=80 type="text" value="これは、ペンです。This is a pen.">
<br>
速さ(1〜30)
<input id="myRate" type="text" value="9" size="2" />
音程(2〜20)
<input id="myPitch" type="text" value="10" size="2" />
音量(0〜10)
<input id="myVolume" type="text" value="8" size="2" />
言語
<select id="myLang" size="1" >
<option value="ja-UP" selected>日本語</option>
<option value="en-US">英語</option>
</select>
<input type="button" value="読み上げ" onclick="playSpeech()">
</form>
<script>
function playSpeech(){
var synthes = new SpeechSynthesisUtterance();
synthes.voiceURI = 'native';
synthes.volume=Number(document.getElementById("myVolume").value)/10;//音量
synthes.rate = Number(document.getElementById("myRate").value)/10; //速度
synthes.pitch= Number(document.getElementById("myPitch").value)/10; //音程
synthes.text = document.getElementById("myText").value; // 話す内容
synthes.lang = document.getElementById("myLang").value; // en-US or ja-UP
speechSynthesis.speak(synthes); // 発話実行
};
</script>
</body>
</html>
]]>
