中級プログラマの自宅でPHP ブログ

自宅用ポータルシステム「MyHome Portal」をオープンソースで公開。MyHome Portalの説明とエンハンス情報。

「2nd 英語」に英文の発音機能追加

「2nd 英語」に、英文の発音機能を追加しました。

【2nd 英語:スマホ用】

http://ok2nd.me/eigo/mobile/

【2nd 英語:PC用】

http://ok2nd.me/eigo/pc/

「High Quality Text-to-Speech API」を使っています。

http://tts-api.com/

以下のサイトで紹介されている方法を使いました。

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

?>