Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
Window: speechSynthesis-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2018.
Die schreibgeschütztespeechSynthesis-Eigenschaft des Window-Objekts gibt einSpeechSynthesis-Objekt zurück, das den Einstieg in die Nutzung derWeb Speech API-Sprachausgabefunktionalität ermöglicht.
Wert
EinSpeechSynthesis-Objekt.
Beispiele
In unserem einfachenSprachsynthesizer-Demo greifen wir zunächst auf den SpeechSynthesis-Controller mitwindow.speechSynthesis zu.Nachdem wir einige notwendige Variablen definiert haben, rufen wir eine Liste der verfügbaren Stimmen mitSpeechSynthesis.getVoices() ab und füllen damit ein Auswahlmenü, damit der Benutzer auswählen kann, welche Stimme er möchte.
Innerhalb desinputForm.onsubmit-Handlers verhindern wir die Formularübermittlung mitpreventDefault(), erstellen eine neue Instanz vonSpeechSynthesisUtterance, die den Text aus dem Text-<input> enthält, setzen die Stimme der Äußerung auf die im<select>-Element ausgewählte Stimme und starten die Äußerung über die MethodeSpeechSynthesis.speak().
const synth = window.speechSynthesis;const inputForm = document.querySelector("form");const inputTxt = document.querySelector("input");const voiceSelect = document.querySelector("select");function populateVoiceList() { voices = synth.getVoices(); for (const voice of voices) { const option = document.createElement("option"); option.textContent = `${voice.name} (${voice.lang})`; if (voice.default) { option.textContent += " — DEFAULT"; } option.setAttribute("data-lang", voice.lang); option.setAttribute("data-name", voice.name); voiceSelect.appendChild(option); }}populateVoiceList();if (speechSynthesis.onvoiceschanged !== undefined) { speechSynthesis.onvoiceschanged = populateVoiceList;}inputForm.onsubmit = (event) => { event.preventDefault(); const utterThis = new SpeechSynthesisUtterance(inputTxt.value); const selectedOption = voiceSelect.selectedOptions[0].getAttribute("data-name"); utterThis.voice = voices.find((v) => v.name === selectedOption); synth.speak(utterThis); inputTxt.blur();};Spezifikationen
| Specification |
|---|
| Web Speech API # tts-section |