言語の指定や翻訳など、他にも機能を追加して行こうと思っていますが、まずは最小限のコードで動くものを作りたかったので、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);
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
