P5 und P5.sound - Sprachsynthese mit P5.speech











Zunächst werden im <head> der Seite die beiden Scripte für P5 und P5.speech eingebunden:

<script src="header/p5.js"></script>
<script src="header/p5.speech.js"></script>

Dann wird im <body> der Seite das Script innerhalb von <script>...</script> fortgesetzt: Zunächst werden Variablen definiert:

var myVoice = new p5.Speech(); // P5.Speech object für Text2Speech erstellen
var label, input, speakbutton, vslider, rslider, pslider; // Elemente für das
// User-Interface erstellen

Dann werden in der Funktion setup() die Grundkomponenten festgelegt:

function setup(){

// Eingabefeld für den zu sprechenden Text erstellen

input = createInput(""); // Eingabefeld erstellen und der Variablen input zuweisen
input.style("width", 400); // Breite des Eingabefelds festlegen
input.position(20, 65); // X/Y-Position des Eingabefelds festlegen

// Button gestalten um die Textwiedergabe auszulösen

speakbutton = createButton('Sprich mit mir'); // Button mit Aufschrift erstellen
// und der Variablen speakbutton zuweisen.
speakbutton.style("width", 400); // Breite des Buttons festlegen
speakbutton.position(20, 100); // X/Y-Position des Buttons festlegen
speakbutton.mousePressed(doSpeak); // Funktion festlegen (doSpeak), die aufgerufen
// wird, sobald der Button gedrückt wird

// Schieberegler (Slider) erstellen

vslider = createSlider(0., 100., 100.); // Slider für Volume mit einer Range
// zwischen 0 und 100 und der aktuellen Einstellung 100 erstellen und der Variablen vslider
// zuweisen.
vslider.position(680, 62); // X/Y-Position des Sliders festlegen
vslider.style("width", 300); // Breite des Sliders festlegen
vslider.mouseReleased(setVolume); // Funktion festlegen (setVolume), die aufgerufen
// wird, sobald der Slider bewegt wird.
rslider = createSlider(10., 200., 100.); // Slider für Sprechgeschwindigkeit mit
// einer Range zwischen 10 und 200 und der aktuellen Einstellung 100 erstellen und der Variablen
// rslider zuweisen.
rslider.position(680, 83); // X/Y-Position des Sliders festlegen
rslider.style("width", 300); // Breite des Sliders festlegen
rslider.mouseReleased(setRate); // Funktion festlegen (setRate), die aufgerufen wird,
// sobald der Slider bewegt wird.
pslider = createSlider(1., 200., 100.); // Slider für Sprechtonhöhe mit einer Range
// zwischen 10 und 200 und der aktuellen Einstellung 100 erstellen und der Variablen rslider
// zuweisen.
pslider.position(680, 105); // X/Y-Position des Sliders festlegen
pslider.style("width", 300); // Breite des Sliders festlegen
pslider.mouseReleased(setPitch); // Funktion festlegen (setPitch), die aufgerufen
// wird, sobald der Slider bewegt wird.

// Beschriftungen (label) erstellen

label = createDiv("volume"); // Label bzw. DIV-Tag für den Volumen-Slider erstellen
label.position(620, 62); // Position für Beschriftung festlegen
label = createDiv("rate"); // Label bzw. DIV-Tag für den Volumen-Slider erstellen
label.position(620, 83); // Position für Beschriftung festlegen
label = createDiv("pitch"); // Label bzw. DIV-Tag für den Volumen-Slider erstellen
label.position(620, 105); // Position für Beschriftung festlegen

// Text to Speech mit dem beim Eingabefeld eingegebenen Text initialisieren

myVoice.speak(input.value()); // Eingegebenen Text (input.value()) an das Text2Speech-
// Objekt myVoice übergeben, so dass er gesprochen werden kann
}

Schließlich müssen noch die Funktionen festgelegt werden, die von dem Button und den Schiebereglern aufgerufen werden:

function setVolume(){
myVoice.setVolume(vslider.value()/100.); // Pegel der Text2Speech-Stimme einstellen
}

function setRate(){
myVoice.setRate(rslider.value()/100.); // Sprechgeschwindigkeit der Text2Speech-
// Stimme einstellen
}

function setPitch(){
myVoice.setPitch(pslider.value()/100.); // Sprechtonhöhe der Text2Speech-Stimme
// einstellen
}

function doSpeak(){
myVoice.speak(input.value()); // Text2Speech-Objekt myVoice mit allen Einstellungen
// starten
}

 

 

Insgesamt sieht das Script dann folgendermaßen aus:

<script src="header/p5.js"></script>
<script src="header/p5.speech.js"></script>

<script>
var myVoice = new p5.Speech();
var label, input, speakbutton, vslider, rslider, pslider;

function setup()
{
input = createInput("");
input.style("width", 400);
input.position(20, 65);

speakbutton = createButton('Sprich mit mir');
speakbutton.style("width", 400);
speakbutton.position(20, 100);
speakbutton.mousePressed(doSpeak);

vslider = createSlider(0., 100., 100.);
vslider.position(680, 62);
vslider.style("width", 300);
vslider.mouseReleased(setVolume);
rslider = createSlider(10., 200., 100.);
rslider.position(680, 83);
rslider.style("width", 300);
rslider.mouseReleased(setRate);
pslider = createSlider(1., 200., 100.);
pslider.position(680, 105);
pslider.style("width", 300);
pslider.mouseReleased(setPitch);

label = createDiv("volume");
label.position(620, 62);
label = createDiv("rate");
label.position(620, 83);
label = createDiv("pitch");
label.position(620, 105);

myVoice.speak(input.value());
}

</script>