This mainly introduces the use of the spoke-tss plug-in and some configuration items. The usage scenario is to click the button on vue3, play a certain text, etc.
1. First, you need to download the dependency
npm install speak-tts
2. Reference the plugin
import Speech from 'speak-tts'
3. Use plug-in to instantiate to detect whether the browser supports broadcasting
import Speech from 'speak-tts';
const speech = new Speech();
// Check whether the browser supports it, return a booleanif(()) {
("The voice engine loads successfully, supports broadcasting")
}else {
('This browser does not support voice broadcasting')
}4. Initialize the plug-in and read the text
Configuration item description:
volume: The voice broadcast sound, default is 1 (volume 0-1).
lang: Language, if not provided, the default value is determined by your browser (multiple languages are declared below).
voice: The voice to use, if not provided, the default voice is selected by the browser. Supports Microsoft Huihui - Chinese (Simplified, PRC), Microsoft Kangkang - Chinese (Simplified, PRC), Microsoft Yaoyao - Chinese (Simplified, PRC)
rate: speech speed, default is 1
pitch: tone, default to 1
splitSentences: Whether to pause at the end of the sentence, default true.
listeners: Listener object attached to SpeechSynthesis object.
Supported Languages: The list may be complete, depending on your browser.
ar-SA，cs-CZ，da-DK，de-DE，el-GR，en，en-AU，en-GB，en-IE，en-IN，en-US，en-ZA，es-AR，es-ES，es-MX，es-US，fi-FI，fr-CA，fr-FR，he-IL，hi-IN，hu-HU，id-ID，it-IT，ja-JP，ko-KR，nb-NO，nl-BE，nl-NL，pl-PL，pt-BR，pt-PT，ro-RO，ru-RU，sk-SK，sv-SE，th-TH，tr-TR，zh-CN，zh-HK，zh-TW
// Simple example().then((data) => {
// The speech object contains available speech list and speech synthesis parameters ("Voice is ready, sound is available", data)
}).catch(e => {
("An error occurred during initialization: ", e)
})
// Complete configuration example({
volume: 1, // Volume lang: 'zh-CN', // language rate: 1, // Speak speed 1 is normal, and 2 times the speed of speaking are written pitch: 1, // Tone splitSentences: true, // Pause at the end of the sentence listeners: {
// event onvoiceschanged: voices => {
// ('Event sound changed', voices); },
},
})
.then(data => {
('Voice is ready, sound is available', data);
})
.catch(e => {
('An error occurred during initialization: ', e);
});
// Read the text// text: text to read aloud// queue: Default true: If set to false, the current pronunciation will be interrupted// listeners: Callback whether the broadcast is successful({
text: 'If you have new orders, please be careful to check', //You can use text here or i18n to see if you want it queue: true,
listeners: {
// Start playing onstart: () => {
('Start utterance')
},
// Determine whether the playback is completed onend: () => {
('End utterance')
},
// Resuming playback onresume: () => {
('Resume utterance')
},
}
})
.then(() => {
('success!');
})
.catch(e => {
('An error occurred:', e);
});5. Instantiate the method on the object
// Set the language (note that the language must be supported by the client browser):('zh-CN')
// Set voice (note that voice must be supported by the client browser):('Fiona') //You can pass SpeechSynthesisVoice returned by the init() function or just pass its name// Set the speech speed:(1)
// Set the volume:(1)
// Set tone:(1)
// Pause ongoing conversations:()
// Continue the ongoing conversation:()
// Cancel the ongoing conversation:()
// Get a boolean value indicating whether the verbal queue contains verbal unspeaked:()
// Get the boolean value to indicate whether the conversation is paused:()
// Get the boolean value to indicate whether the conversation is in progress:()This is the end of this article about the use of vue speaker-tss plug-in. For more related content on using vue speaker-tss plug-in, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!