2016年6月18日土曜日

入力したテキストを読み上げてくれるアプリを作る

テキストエリアに英語を入力してエンターキーを押すと、英語で読み上げてくれるというアプリをGoogle Apps ScriptのHTML ServiceとWeb Speech APIを使って作ってみました。

言語の指定や翻訳など、他にも機能を追加して行こうと思っていますが、まずは最小限のコードで動くものを作りたかったので、CSSは使わずにHTMLとJavaScriptだけでシンプルに書きました。


サンプル


ポイント
1. テキストエリアでキーを上げた時、そのキーがエンターキーだったら処理を実行する。
document.getElementById("ta").onkeyup = function(evt) {
        var kc = evt.keyCode;
        if(kc == "13"){

2. テキストを取得して英語で読み上げる。
var msg = new SpeechSynthesisUtterance(document.getElementById("ta").value);
           msg.lang = "en-US";
           window.speechSynthesis.speak(msg);

コード.gs
function doGet(e) {
  return HtmlService.createTemplateFromFile('index')
      .evaluate()
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}


index.html
<!DOCTYPE html>
<html>
<body>   
    <textarea id="ta"></textarea>
</body>
<script>
    document.getElementById("ta").onkeyup = function(evt) {
        var kc = evt.keyCode;
        if(kc == "13"){
           var msg = new SpeechSynthesisUtterance(document.getElementById("ta").value);
           msg.lang = "en-US";
           window.speechSynthesis.speak(msg);
        }
    }
</script>
</html>

ブラウザに表示される画面

ブラウザにテキストエリアが表示されます。

英語を入力してエンターキーを押すと、入力された音声が再生されます。

ブラウザに表示するには、Webアプリとして公開する必要があります。
手順は下記を参照してください。

Webアプリの雛形



参考サイト
Web apps that talk - Introduction to the Speech Synthesis API
https://developers.google.com/web/updates/2014/01/Web-apps-that-talk-Introduction-to-the-Speech-Synthesis-API