speaker
On this page you find the documentation for the speaker variable.
Introduction
The speaker variable contains an object used for playing something on the device's speaker. It can be used to play sounds (not yet supported 😅) or to speak words to the user.
speak() - Making the speaker speak words
Use the method speak() to instruct the speaker to speak some words to the user. Pass it the words as a string. The speaker's default voice will be used to speak the words.
The speaker will only work if the web browser the user is using supports the Web Speech API.
Example showing how to make the speaker speak some words when a Button is clicked.
Open in Online Editorclass StartPage extends Page{
createGui(){
return Button.text(`Say something!`).onClick(p.speak)
}
speak(){
speaker.speak(`Hello there, how are you?`)
}
}speakWithVoice() - Making the speaker speak words with a specific voice
Use the method speakWithVoice() to instruct the speaker to speak some words to the user with a specific voice. Pass it the words as a string, and the voice as an object retrieved from getVoices().
Example showing how to make the speaker speak some words when a Button is clicked.
Open in Online Editorclass StartPage extends Page{
createGui(){
return Button.text(`Say something!`).onClick(p.speak)
}
speak(){
const voices = speaker.getVoices()
const randomVoice = voices[m.randomInt(0, voices.length-1)]
speaker.speakWithVoice(`Hello there, how are you?`, randomVoice)
}
}getVoices() - Obtaining all supported voices
Use the method getVoices() to obtain an array of voices that can be used to speak the words passed to speakWithVoices(). This method returns an array with voice objects looking like this:
const voiceObject = {
id: `A unique value identifying this voice`,
name: `The name of this voice`,
languageCode: `The code of the language this voice is specialized in, e.g. en-US`,
rate: 1,
pitch: 1,
}languageCodeis of the formatLANGUAGE-COUNTRY. For example,en-USmeans English as they speak it in the United States. This webpage contains the code for different languages and countriesratecan be decreased/increased to make the voice speak slower/fasterpitchcan be decreased/increased to lower/raise the pitch of the voice
Different devices support different voices, so the voices that are supported on your device are not necessarily supported on devices your users have. Which voices that are available are primarily determined by:
- Which operating system (Windows, Max, Linux, etc.) the device is using
- Which web browser (Firefox, Chrome, Safari, Edge, etc. ) that is used to run the BagaWork app
class StartPage extends Page{
createGui(){
const voices = speaker.getVoices()
return Rows.padding(2).children(
voices.map(
v => [
Columns.backgroundColor(`white`).cornerRadius(4).padding(1).children(
Text.size(2).text(v.name),
Text.size(2).text(v.languageCode),
Text.size(1).text(v.rate.toString()),
Text.size(1).text(v.pitch.toString()),
),
Box.height(2),
]
),
)
}
}getVoicesByLanguageCode() - Obtaining supported voices in a language
Use the method getVoicesByLanguageCode() to obtain an array of voices that are for a specific language. Pass it the language code as a string, such as `sv` for Swedish, or `en` for English. This webpage shows the code for different languages and countries.
class StartPage extends Page{
createGui(){
const voices = speaker.getVoicesByLanguageCode(`en`)
return Rows.padding(2).children(
voices.map(
v => [
Columns.backgroundColor(`white`).cornerRadius(4).padding(1).children(
Text.size(2).text(v.name),
Text.size(2).text(v.languageCode),
Text.size(1).text(v.rate.toString()),
Text.size(1).text(v.pitch.toString()),
),
Box.height(2),
]
),
)
}
}Playground
class StartPage extends Page{
textToSay = `This will be said!`
rate = 1
pitch = 1
createGui(){
const voices = speaker.getVoices()
return Rows.padding(2).children(
EnterText.text(p.textToSay).store(p, `textToSay`),
Columns.children(
Text.text(`Rate: `),
EnterNumber.number(p.rate).store(p, `rate`),
),
Columns.children(
Text.text(`Pitch: `),
EnterNumber.number(p.pitch).store(p, `pitch`),
),
Box.size(1).child(
Rows.children(
voices.map(
v => Button.text(`${v.name} (${v.languageCode})`).stay().onClick(p.speak, v),
),
),
)
)
}
speak(voice){
voice.rate = p.rate
voice.pitch = p.pitch
speaker.speakWithVoice(p.textToSay, voice)
}
}