Moderní tvorba webových aplikací

O webu

Přečtení textu webu

Jak obsah webové stránky přečíst hlasem.

4 minuty

V některých případech se může hodit textový obsah webu přehrát strojovým hlasem:

  1. Přečtení obsahu obrázků, které slouží jako ochrana proti spamu.
  2. Další způsob, jak může návštěvník konsumovat obsah. I když v tomto případě je značně lepší, když je obsah skutečně namluven.

Pro technickou realisaci je k tomu nutná hlasová čtečka (skript, kterému se předá text a on vrátí zvukový soubor). Za tímto účelem jde použít čtečku, kterou používá Google překladač (translate.google.com) a jakž takž umí i česky.

Kousek předchozího odstavce přečtený Google překladačem:

Google překladač na následující adrese vrátí text z parametru q jako zvuk:

http://translate.google.com/translate_tts?tl=cs&q=Text

Zdá se ale, že pro přímé přehrání na stránce pomocí značky <audio> je potřeba používat placené Google Translate API.

Existují dva způsoby, jak toto omezení pro vyzkoušení alespoň krátkodobě obejít:

Stažení zvuku PHP skriptem

Pro obejití ochrany jde nahrávku pustit přes vlastní skript.

<?php 
$url = "http://translate.google.com/translate_tts?tl=cs&q=" 
      . urlencode($_GET["str"]);
$data = file_get_contents($url);
header("Content-Type: audio/mpeg");
echo $data;

Přehrání v JavaScriptu je potom s využitím HTML 5 <audio> velice jednoduché:

function prehrat(str) {
    var url = "./cist.php?str=" + encodeURIComponent(str); 
    var a = new Audio(url);
    a.play();
}	

Přehrání vložením do rámu

V Google Chrome se obsah přehraje při vložení do rámu.

Samostatná ukázka:

Omezení Googlu

Při četném používání nejspíš Google získá podezření.

Naše systémy zjistily, že vaše počítačová síť je zdrojem neobvyklého provozu. Účelem této stránky je zkontrolovat, zda požadavky odesíláte skutečně vy, a ne robot.

Je potom nutné opsat kód pro ověření.

Omezení v používání API

Odkazy jinam

Související články

Detekce otevření DevTools

Jak zjistit, že se na stránce otevřely vývojářské nástroje.

13 minut

JavaScript null a undefined

Rozdíly mezi null a undefined v JavaScriptu, kdy je používat a jak se vyhnout běžným chybám.

12 minut

Sleep v JavaScriptu

Jak implementovat sleep/delay funkcionalitu v JavaScriptu pomocí Promise a async/await

6 minut

JavaScript Battery API

Jak v JS zjistit stav baterie, co dnes funguje a kdy API nepoužívat.

3 minuty

Web jecas.cz píše Bohumil Jahoda, kontakt
Seznam všech článků
2013–2025