「2nd 英語」に英文の発音機能追加
「2nd 英語」に、英文の発音機能を追加しました。
【2nd 英語:スマホ用】
【2nd 英語:PC用】
「High Quality Text-to-Speech API」を使っています。
以下のサイトで紹介されている方法を使いました。
http://hello-apis.blogspot.jp/2013/02/tts-apicom-text-to-speech-api.html
<button onclick="(new Audio('http://tts-api.com/tts.mp3?q=hello%20world.')).play();return false;"><img src="../icon/speaker.png"></button>
テストでは、以下の2つの方法も試しましたが、上記方法が一番レスポンスが良かったようです。
1つは、次のサイトで紹介されている「jquery.say.js」を使う方法です。
http://stabucky.com/wp/archives/4576
<button onclick="sayEnglish('hello%20world.');return false;"><img src="../icon/speaker.png"></button>
<script src="../scripts/jquery.say.js"></script>
<script>
function sayEnglish(text) {
$.say(text.replace(/’/g, "'"));
}
</script>
もう1つは、Ajaxを使って、audioタグを返す方法です。
<button onclick="speechEnglish('hello%20world.');return false;"><img src="../icon/speaker.png"></button>
<script>
function speechEnglish(text) {
$.ajax({
type: "GET",
url: "text-to-speech.php?q="+text,
async: true,
success: function(res){
$("#mp3").html(res);
var myAudio=document.getElementById("english");
myAudio.play();
}
})
}
</script>
<span id="mp3"></span>
≪text-to-speech.php≫<?php
echo '<audio id="english" src="http://tts-api.com/tts.mp3?q='.$_GET['q'].'>" controls></audio>';
?>