So bringen Sie Ihren Browser dazu, mit JavaScript zu sprechen

1. Das einfachste Beispiel

Lassen Sie uns eine grundlegende Funktion erstellen, die die Wörter oder Sätze, die wir sagen möchten, entgegennimmt und unseren Browser diese aussprechen lässt. Wir verwenden die native SpeechSynthesis-API, die in den meisten modernen Browsern verfügbar ist.

Funktion sprechen(Satz) {
    const Äußerung = neue Sprachsyntheseäußerung(Satz)
    window.speechSynthesis.speak(Äußerung)
}

//prüfen
sprich('Hallo Welt');

Ob Sie es glauben oder nicht, der obige Code ist alles, was Sie brauchen, um die meisten Browser einen Satz sprechen zu lassen! Schauen wir uns an, was hier passiert.

Wir haben die Funktion „speak()“ erstellt, die ein Wort als Parameter verwendet. Wir erstellen ein Soundobjekt, das eigentlich ein Sprachanforderungsobjekt ist, das alle Daten darüber enthält, was gesagt werden soll und wie es gesagt werden soll.

2. Sprechgeschwindigkeit und Tonhöhe anpassen

Lassen Sie uns ein etwas komplexeres Beispiel machen und versuchen, die Geschwindigkeit und Tonhöhe der gesprochenen Wörter zu ändern.

/**
 * @param sentence: der zu sagende Satz * @param pitch: Tonhöhe, Wertebereich (0 - 2) Standardwert: 1
 * @param rate: Sprechgeschwindigkeit, Wertebereich (0,1 - 10) Standardwert: 1
 */
Funktion sprechen(Satz, Tonhöhe, Geschwindigkeit) {
    const Äußerung = neue Sprachsyntheseäußerung(Satz)

    Äußerung.Rate = Rate
    Äußerung.Tonhöhe = Tonhöhe

    window.speechSynthesis.speak(Äußerung)
}

Im obigen Beispiel haben wir basierend auf der ursprünglichen Funktion zwei Parameter hinzugefügt: Tonhöhe und Sprechgeschwindigkeit. Nachdem wir das Soundobjekt erstellt haben, können wir bestimmte Eigenschaften direkt am Soundobjekt ändern. Es kann derzeit jedoch nicht über Konstruktoren oder Setter-Methoden geändert werden.

Pitch ist eine Gleitkommazahl zwischen 0 und 2 mit einem Standardwert von 1. Die Wirkung dieses Wertes kann durch den Motor oder den Ton eingeschränkt sein.

Rate ist eine Gleitkommazahl im Bereich von 0,1 bis 10 und der Standardwert ist 1.

Wenn wir nun den obigen Code mit einem einfachen Satz aufrufen, spricht unser Browser Folgendes mit normaler Sprechgeschwindigkeit und Tonfall:

sprechen('Hallo Welt', 1, 1)

3. So regeln Sie die Lautstärke

Wir können auch die Lautstärke anpassen, genau wie wir Tonhöhe und Tempo anpassen. Sehen wir uns kurz an, wie das geht.

/**
 * @param sentence: der zu sagende Satz * @param volume: Lautstärke, Wertebereich (0 - 1) Standardwert: 0,5
 */
Funktion sprechen(Satz, Lautstärke) {
    const Äußerung = neue Sprachsyntheseäußerung(Satz)

    Äußerung.Lautstärke = Lautstärke

    window.speechSynthesis.speak(Äußerung)
}

Ändern Sie den vorherigen Code. Wir übergeben jetzt den Lautstärkeparameter. Die Lautstärke ist ebenfalls eine Gleitkommazahl im Bereich von 0 bis 1, der Standardwert beträgt 0,5.

Ebenso besteht aktuell keine Möglichkeit die Lautstärke über die Konstruktor- oder Setter-Methoden einzustellen. Nun können wir dieser Funktion den gewünschten Satz und die gewünschte Lautstärke übergeben und das gewünschte Ergebnis hören.

4. Häufig verwendete Funktionen

Das SpeechSynthesis-Objekt hat einige Funktionen, die nützlich sein können. Wir können den Fortschritt einer Sprache unterbrechen, fortsetzen oder sogar abbrechen. Werfen wir einen kurzen Blick darauf:

const utterance = new SpeechSynthesisUtterance('Hallo Welt');
window.speechSynthesis.speak(Äußerung);

// Pause window.speechSynthesis.pause();
// Fortsetzen window.speechSynthesis.resume();
// Abbrechen window.speechSynthesis.cancel();

Der obige Code sagt den gewünschten Satz und die Sprachausgabe wird angehalten, fortgesetzt und schließlich abgebrochen. Sie können den obigen Code auch in Ihrem Browser ausprobieren.

Wir können auch direkt über die Pauseneigenschaft des SpeechSynthesis-Objekts bestimmen, ob die Audiowiedergabe angehalten ist. Das Objekt gibt einen Booleschen Wert zurück, der angibt, ob die Audiowiedergabe angehalten ist.

window.speechSynthesis.paused // Boolesch

Was ist, wenn immer noch ein Rückstand an Sätzen vorhanden ist, die darauf warten, gelesen zu werden? Es gibt auch eine ausstehende Eigenschaft, mit der überprüft wird, ob etwas darauf wartet, gesprochen zu werden. Es wird ein Boolescher Wert zurückgegeben, der angibt, ob Sprache zur Verarbeitung aussteht.

const utterThis = new SpeechSynthesisUtterance('Hallo Welt');
const utterThat = new SpeechSynthesisUtterance('Hallo JavaScript');

window.speechSynthesis.speak(utterThis);
window.speechSynthesis.speak(utterThat);
Fenster.Sprachsynthese.ausstehend;

Wenn der obige Code ausgeführt wird, werden zwei Sprachclips in die Warteschlange gestellt und der Reihe nach abgespielt. Wenn wir die ausstehende Eigenschaft erhalten, gibt dieser Wert „true“ zurück, da eine zweite Stimme darauf wartet, abgespielt zu werden.

Hinweis: Wenn Sie nur eine Stimme haben, gibt die ausstehende Eigenschaft immer „False“ zurück, da keine Stimme zur Wiedergabe in der Warteschlange steht.

5. Ereignisüberwachung

Wenn wir die SpeechSynthesisUtteranceAPI verwenden, können wir mehrere nützliche Ereignisse abhören. Schauen wir es uns gemeinsam an:

const utterance = new SpeechSynthesisUtterance('Hallo Welt')

utterance.addEventListener('start', () => console.log('Äußerung starten'))
utterance.addEventListener('pause', () => console.log('Äußerung pausiert'))
utterance.addEventListener('resume', () => console.log('Äußerung fortgesetzt'))
utterance.addEventListener('Ende', () => console.log('Ende der Äußerung'))

window.speechSynthesis.speak(Äußerung)

6. Fazit

Hoffentlich reicht dieser Artikel aus, um Ihnen den Einstieg in die synthetische Sprache in Ihrem Browser zu erleichtern! Sie sollten jetzt wissen, wie Sie den Sprechvorgang starten, stoppen und pausieren sowie die Geschwindigkeit, Tonhöhe und Lautstärke der Sprache anpassen.

Oben finden Sie Einzelheiten dazu, wie Sie JavaScript verwenden, um Ihren Browser zum Sprechen zu bringen. Weitere Informationen zu JavaScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!