Mediaelements.js con text to speech (TTS)

Far parlare i vostri sottotitoli

Mediaelements.js è uno script molto famoso per vedere i video online in HTML5, con fallback in Flash. Ha una funzionalità interessante che stiamo, in OC Open Consulting, usando molto in alcuni progetti e-learning: gestisce i sottotitoli in formato SRT attraverso il tag <track>.

Noi ad esempio teniamo i video senza parlato e sovrapponiamo i sottotitoli nella lingua dell'utente, in modo da non dover gestire molti video identici.
Per questa ragione è un peccato che mediaelements.js non supporti il text to speech, ovvero la sintesi vocale dei sottotitoli.

Così l‘ho fatta io: sono bastate poche righe di codice per appoggiare i sottotitoli al servizio di tts di Google Translate.

Come funziona?

Ogni volta che mediaelements.js legge un sottotitolo, viene fatta una chiamata all'URL di Google Translate che restituisce un mp3 con la frase parlata nella lingua scelta. L‘mp3 viene letto da un elemento <audio> creato dinamicamente all'interno della pagina.

Siccome negli elementi <audio> e <video> non è possibile il crossdomains per ragioni di sicurezza, ho dovuto creare anche un ulteriore pezzo: un file PHP da caricare nella root che fa da “ponte” tra Google e mediaelements.js.

Un po‘ di codice

Il codice Javascript è questo:

	// kalamun: add text 2 speech
var txt2speech=false;
if(document.getElementById('txt2speech')) txt2speech=document.getElementById('txt2speech');
if(!txt2speech) {
 txt2speech=document.createElement('audio');
 txt2speech.id='txt2speech';
 document.body.appendChild(txt2speech);
}
if(txt2speech.getAttribute("title")!=track.entries.text[i]) {
 txt2speech.setAttribute("title",track.entries.text[i]);
 txt2speech.src='/txt2speech.php?url='+encodeURIComponent(track.entries.text[i]+'&tl='+track.srclang);
 txt2speech.play();
}
// end of text 2 speech

e va inserito nel file mediaelement-and-player.js dentro alla funzione displayCaptions, subito dopo la riga

           t.captions.show().height(0);

(che nella versione 2.13.2 si trova alla riga 4476).
Ovviamente se usate la versione minimizzata va inserito anche lì.

Dove funziona?

  • Google Chrome
  • Mozilla Firefox 21+ (no Windows XP)
  • Internet Explorer 9+
  • Safari (su Windows deve essere installato anche Quicktime)

Scarica

In questo zip trovate entrambi i file javascript, e il file PHP da inserire nella root del sito: Mediaelements.js Text to speech.zip