speech.md

Browser spraak

Laat de browser een reactie uitspreken!

let synth = window.speechSynthesis

function speak(text) {
    if (synth.speaking) {
        console.log('still speaking...')
        return
    }
    if (text !== '') {
        let utterThis = new SpeechSynthesisUtterance(text)
        synth.speak(utterThis)
    }
}

speak("Hello world")

User interaction

⚠️ Speech werkt alleen als er een gebruikers interactie is geweest, bv. via een button:

btn.addEventListener("click", () => {
  speak(`I think it's a hamster!`)
})

Voices

Je kan verschillende voices gebruiken. Zie ook de docs

let voices = window.speechSynthesis.getVoices()
let name = "Alex"
utterThis.voice = voices.filter(function(voice) { return voice.name == name; })[0]

Form

Je kan een inputField en de button toevoegen om het te testen met verschillende teksten

<input type="text" id="inputfield">
<button id="playbutton">Play</button>

let inputField = document.querySelector("#inputfield")
let playButton = document.querySelector("#playbutton")

playButton.addEventListener("click", () => {
    let text = inputField.value
    speak(text)
})

Links

• Complete Browser speech example with voices and pitch
• Human Speech recognition
• Synthesizer API
• Web Audio API