jtalkを追加

2012-08-28 23:37:07 +09:00 · 2012-08-28 23:37:07 +09:00 · 9c73e33535
commit 9c73e33535
parent be17a4910e
4 changed files with 70 additions and 0 deletions
--- a/javascript/jtalk/README.md
+++ b/javascript/jtalk/README.md
@ -0,0 +1,12 @@
+文字しゃべる君
+============
+
+できること
+--------
+- 入力された文字をしゃべります
+- *ただしGoogle翻訳に依存
+  - つまりオンラインでしか利用できない
+
+ライセンス
+--------
+&copy;2012 [@kou029w](http://twitter.com/kou029w) - [MIT license](http://kou029w.appspot.com/mit-license.txt)
--- a/javascript/jtalk/jtalk.html
+++ b/javascript/jtalk/jtalk.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+Copyright (c) 2011 kou029w
+Licensed under the MIT License.
+http://kou029w.appspot.com/mit-license.txt
+-->
+<html>
+<head>
+  <title>jTalk</title>
+  <meta charset='utf-8'>
+  <script src='http://www.google.com/jsapi'></script>
+  <script>google.load('jquery','1.6');</script>
+  <script src='src/jtalk.js'></script>
+  <link rel='stylesheet' type='text/css' href='src/jtalk.css' />
+</head>
+<body>
+  <h1>jTalk</h1>
+  <input id='input_text'>
+  <div id='output'>
+    <audio id='output_voice' autoplay></audio>
+  </div>
+</body>
+</html>
--- a/javascript/jtalk/src/jtalk.css
+++ b/javascript/jtalk/src/jtalk.css
@ -0,0 +1,17 @@
+body {
+    margin:0 10%;}
+h1 {
+    font-family:serif;
+    padding:8px;
+    border-bottom:3px solid #F7750D;}
+#input_text,#output {
+    font-size:large;
+    font-family:sans-serif;
+    line-height:140%;}
+#input_text {
+    width:100%;}
+#output {
+    word-break:break-all;
+    padding:5px 2px;}
+#output_text_new {
+    display:none;}
--- a/javascript/jtalk/src/jtalk.js
+++ b/javascript/jtalk/src/jtalk.js
@ -0,0 +1,18 @@
+$(function(){
+    $('#input_text').focus();
+    $('#input_text').keypress(function(e){
+        if( $(this).val() && e.which == 13 ){
+            $('#output_voice').attr('src',
+                'http://translate.google.com/translate_tts?tl=ja&q='
+                + encodeURIComponent($(this).val()));
+            $('#output_text_new').attr('id','output_text');
+            $('<div>',{
+                id:'output_text_new',
+                html:$(this).val().replace(' ','&nbsp;') }
+            ).insertAfter('#output_voice');
+            $(this).val('');
+            $('#output_text_new').fadeIn('');
+            $('#output_text').fadeTo('',0.5);
+        };
+    });
+});