Text-to-Speech mit P5.Speech: In diesem Video zeigt Daniel Shiffman, wie er mit Hilfe der P5.Speech-JavaScript-Bibliothek P5.js, dem JavaScript-Mode von Processing, das Sprechen beibringt. Leider scheint er eine frühe Version dieser Bibliothek zu nutzen, mit meiner gestern heruntergeladenen P5.Speech-Bibliothek lief sein Code bei mir jedenfalls nicht. Ich habe daher mithilfe der Dokumentation und den Beispielen eine leicht abgewandelte Version erstellt, die mit mir spielte. Hier der Quellcode:
let speech;
function setup() {
createCanvas(400, 100);
background(0);
speech = new p5.Speech();
speech.onLoad = ready;
speech.onStart = startSpeaking;
speech.onEnd = endSpeaking;
function ready() {
// console.log("Speech geladen!");
// console.log(speech.voices);
}
function startSpeaking() {
// console.log("Start speaking");
background(255, 10, 10);
textSize(40);
fill(255)
text("Es spricht P5!", 60, 65);
}
function endSpeaking() {
// console.log("End speaking");
background(0);
}
}
function mousePressed() {
speech.setVoice("Google Deutsch");
speech.speak("Hallo Jörg, wie geht es Dir?");
}
Der wichtigste Unterschied sind die Callback-Aufrufe. Zum einen scheint man dem Konstruktor keinen Callback mitgeben zu können, sondern muß diesen separat mit
speech.onLoad = ready;
aufrufen, zum anderen heißen die beiden Start- und Ende-Callbacks nicht speech.started() und speech.ended(), sondern müssen mit
speech.onStart = startSpeaking;
speech.onEnd = endSpeaking;
initialisiert werden.
Wer – so wie ich – mit nichtenglischen (nichtamerikanischen) Texten hantieren will, muß auf jeden Fall der index.html mitteilen, daß der Browser UTF-8 verwenden soll, sonst kommt es im JavaScript-Code zu seltsamen Effekten. Meine index.html sieht daher so aus,
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta charset="utf-8">
<title>Text2Speech 1</title>
<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
<style> body {padding: 0; margin: 0;} </style>
<script src="js/p5.js"></script>
<script src="js/p5.dom.js"></script>
<script src="js/p5.sound.js"></script>
<script src="js/p5.speech.js"></script>
<script src="t2speech1.js"></script>
</head>
<body>
</body>
</html>
wobei die Datei t2speech1.js die Datei mit dem obigen JavaScript-Code ist (dies ist der Tatsache geschuldet, daß RubyFrontier mein Webworking-Tool für statische Seiten, verschnupft auf doppelte Dateinamen reagiert, daher dürfen sie nicht alle sketch.js heißen). Vergleiche hierzu auch meine Worknotes
Caveat: Die P5.Speech-Bibliothek ist brandneu und funktioniert vermutlich (noch) nicht in jedem Brwoser, der JavaScript unterstützt. Ich habe den Sketch bisher nur im aktuellsten Google Chrome für den Mac getestet, ob er auch in anderen Browsern funktioniert, weiß ich noch nicht, speziell der Firefox hatte sich in der Vergangenheit schon mehrmals als zickig in der Zusammenarbeit mit P5.js erwiesen. Für entsprechendes Feedback in meinen (Email-) Kommentaren wäre ich dankbar.
Über …
Der Schockwellenreiter ist seit dem 24. April 2000 das Weblog digitale Kritzelheft von Jörg Kantel (Neuköllner, EDV-Leiter, Autor, Netzaktivist und Hundesportler — Reihenfolge rein zufällig). Hier steht, was mir gefällt. Wem es nicht gefällt, der braucht ja nicht mitzulesen. Wer aber mitliest, ist herzlich willkommen und eingeladen, mitzudiskutieren!
Alle eigenen Inhalte des Schockwellenreiters stehen unter einer Creative-Commons-Lizenz, jedoch können fremde Inhalte (speziell Videos, Photos und sonstige Bilder) unter einer anderen Lizenz stehen.
Der Besuch dieser Webseite wird aktuell von der Piwik Webanalyse erfaßt. Hier können Sie der Erfassung widersprechen.
Diese Seite verwendet keine Cookies. Warum auch? Was allerdings die iframes von Amazon, YouTube und Co. machen, entzieht sich meiner Kenntnis.
Werbung
Werbung
