bltavares/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Mozilla hackday

This is the result of the Mozilla's hackday after BrazilJS 2012.
The idea is to create a text-to-speech app to run on the Firefox OS.
Due to some restrictions (like audio media and cross-domain requests) we need to setup a small proxy.
It is written in ruby, using sinatra and it requires ffmpeg to be installed with vorbis support.
Installation


Install ruby on your machine if you don't have
Install sinatra ($ gem install sinatra)
Install ffmpeg with vorbis support (on mac with brew:$ brew install ffmpeg --with-libvorbis --with-theora)
Run the server ($ ruby server.rb)

Usage

It is really dumb right now, and can only read wikipedia articles with brazilian portuguese accent.
It is just a proof of concept about a text-to-speech service.
Some limitations.

This server uses Google translate text-to-speech. It may take long to run it since it is donwloading the mp3 first.
We could implement it using also Mac's native speech-to-text or any other one, which would be faster.

  
## index.html
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
    <script>

Array.prototype.chunk = function ( n ) {
    if ( !this.length ) {
        return [];
    }
    return [ this.slice( 0, n ) ].concat( this.slice(n).chunk(n) );
};


      function toca(titles) {
        var title = titles.shift();
         var url = "/translation?text=" + (title);
         var urlMp3 = "/translationMp3?text=" + (title);
         $('#player').html("<audio controls='controls' autoplay='autoplay'>  <source src='" + urlMp3 + "' type='audio/mpeg' /> <source src='" + url + "' type='audio/ogg' /> </audio>");
         $("audio").on("ended", function() {
           if(titles !== []){
             toca(titles);
           }
         });
      }

      $(function(){
       $("#go").click(function(){
         var iframe = $("iframe");
         iframe.attr("src", "/remote?url=" + $("#url").val());
         iframe.load(function(){
           var title = $("h1", iframe.contents()).text();
           var p = $("#mw-content-text p", iframe.contents()).text().replace(/√©/gi,"e").replace(/√£/gi,"a").replace(/\[.*\]/gi,'');
           var ps = p.split(" ").chunk(10);
           var pss = _.map(ps, function(i) { return i.join(" ");});
           toca(_.flatten([title, pss]));
          });
       });
      });
    </script>
    <style>
      body {
        text-align: center;
      }
      input {
        margin: 1%;
      }
    </style>
  </head>
  <body>
    <input id="url" value="http://pt.wikipedia.org/wiki/Coxinha" />
    <input id="go" type="submit" value="Go!" />
    <br />
    <iframe id="canvas" height="100%" width="100%"> </iframe>
    <div id="player" />
  </body>
</html>

## server.rb
# encoding: utf-8

require 'sinatra'
require 'uri'
require 'net/http'

get '/' do
  File.read("index.html")
end

get '/remote' do
 Net::HTTP.get URI(URI.escape(params[:url]))
end

get '/translationMp3' do
  content_type 'audio/mpeg'
  `curl -A "Mozilla" 'http://translate.google.com/translate_tts?tl=pt-br&q=#{URI.escape(params[:text])}'`
end

get '/translation' do
  content_type 'audio/ogg'
  `curl -A "Mozilla" 'http://translate.google.com/translate_tts?tl=pt-br&q=#{URI.escape(params[:text])}' | ffmpeg -i pipe:0 -f ogg -acodec libvorbis pipe:1`
end

get '/webapp' do
  content_type 'application/x-web-app-manifest+json'
<<EOS
  {
  "version": "1.0",
  "name": "Mulher do google l√™ para voc√™",
  "description": "Tenha otimos sonhos e pe√ßa a melhor pizza com esse app",
  "icons": {
    "16": "http://cdn1.iconfinder.com/data/icons/fugue/icon/toilet-female.png",
    "48": "http://www.rw-designer.com/icon-view/3391.png",
    "128": "http://png-1.findicons.com/files//icons/2219/dot_pictograms/128/ladies_room_toilet.png"
  },
  "developer": {
    "name": "Bruno Tavares/TC/Portela",
    "url": "http://bltavares.com"
  },
  "installs_allowed_from": ["*"],
  "orientation": "portrait,landscape-secondary",
  "fullscreen": "true",
  "default_locale": "en"
}
EOS
end
	<!DOCTYPE html>
	<html lang="en-us">
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
	<script>

	Array.prototype.chunk = function ( n ) {
	if ( !this.length ) {
	return [];
	}
	return [ this.slice( 0, n ) ].concat( this.slice(n).chunk(n) );
	};


	function toca(titles) {
	var title = titles.shift();
	var url = "/translation?text=" + (title);
	var urlMp3 = "/translationMp3?text=" + (title);
	$('#player').html("<audio controls='controls' autoplay='autoplay'> <source src='" + urlMp3 + "' type='audio/mpeg' /> <source src='" + url + "' type='audio/ogg' /> </audio>");
	$("audio").on("ended", function() {
	if(titles !== []){
	toca(titles);
	}
	});
	}

	$(function(){
	$("#go").click(function(){
	var iframe = $("iframe");
	iframe.attr("src", "/remote?url=" + $("#url").val());
	iframe.load(function(){
	var title = $("h1", iframe.contents()).text();
	var p = $("#mw-content-text p", iframe.contents()).text().replace(/√©/gi,"e").replace(/√£/gi,"a").replace(/\[.*\]/gi,'');
	var ps = p.split(" ").chunk(10);
	var pss = _.map(ps, function(i) { return i.join(" ");});
	toca(_.flatten([title, pss]));
	});
	});
	});
	</script>
	<style>
	body {
	text-align: center;
	}
	input {
	margin: 1%;
	}
	</style>
	</head>
	<body>
	<input id="url" value="http://pt.wikipedia.org/wiki/Coxinha" />
	<input id="go" type="submit" value="Go!" />
	<br />
	<iframe id="canvas" height="100%" width="100%"> </iframe>
	<div id="player" />
	</body>
	</html>
	# encoding: utf-8

	require 'sinatra'
	require 'uri'
	require 'net/http'

	get '/' do
	File.read("index.html")
	end

	get '/remote' do
	Net::HTTP.get URI(URI.escape(params[:url]))
	end

	get '/translationMp3' do
	content_type 'audio/mpeg'
	`curl -A "Mozilla" 'http://translate.google.com/translate_tts?tl=pt-br&q=#{URI.escape(params[:text])}'`
	end

	get '/translation' do
	content_type 'audio/ogg'
	`curl -A "Mozilla" 'http://translate.google.com/translate_tts?tl=pt-br&q=#{URI.escape(params[:text])}' \| ffmpeg -i pipe:0 -f ogg -acodec libvorbis pipe:1`
	end

	get '/webapp' do
	content_type 'application/x-web-app-manifest+json'
	<<EOS
	{
	"version": "1.0",
	"name": "Mulher do google l√™ para voc√™",
	"description": "Tenha otimos sonhos e pe√ßa a melhor pizza com esse app",
	"icons": {
	"16": "http://cdn1.iconfinder.com/data/icons/fugue/icon/toilet-female.png",
	"48": "http://www.rw-designer.com/icon-view/3391.png",
	"128": "http://png-1.findicons.com/files//icons/2219/dot_pictograms/128/ladies_room_toilet.png"
	},
	"developer": {
	"name": "Bruno Tavares/TC/Portela",
	"url": "http://bltavares.com"
	},
	"installs_allowed_from": ["*"],
	"orientation": "portrait,landscape-secondary",
	"fullscreen": "true",
	"default_locale": "en"
	}
	EOS
	end