Skip to content

Instantly share code, notes, and snippets.

@bltavares bltavares/README.md
Created Sep 2, 2012

Embed
What would you like to do?
Firefox hackday

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

  1. Install ruby on your machine if you don't have
  2. Install sinatra ($ gem install sinatra)
  3. Install ffmpeg with vorbis support (on mac with brew:$ brew install ffmpeg --with-libvorbis --with-theora)
  4. 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.

<!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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.