Speech_Synthesis

转载

桃太郎 2024-07-09 16:40:08

文章标签 Speech_Synthesis vue JavaScript 语音合成 ci 文章分类 架构后端开发

前提：富文本去除标签，只留下纯文本 == >> str.replace(/<[^>]+>/g, "")

这是在vue中使用，以下是项目实际代码：

1. 开始播放

playRead(){
    const articleTxt = this.article.content.replace(/<[^>]+>/g, "");      //获取富文本的纯文字
    let to_speak = new SpeechSynthesisUtterance(articleTxt);

    //to_speak.rate = 1.4;// 设置播放语速，范围：0.1 - 10之间        
    // to_speak.voiceURI = 'Ting-Ting'
    to_speak.voiceURI = 'Google 普通话（中国大陆）';
    to_speak.rate = 1;

    to_speak.onend = (event) => {  //语音合成结束时候的回调
        this.isPlay = false;      //关闭播放状态，
        this.isResume = false;     //不在继续播放
        this.isPause = false;     //不是暂停状态
     }
     window.speechSynthesis.speak(to_speak);

     this.isPlay = true;     //播放状态
},

2. 暂停播放

//暂停
pause() {
    window.speechSynthesis.pause();
    this.isPause = true;      //暂停
    this.isResume = false;    //不是继续播放
},

3. 继续播放

//继续播放
resume() {
    window.speechSynthesis.resume(); //继续
    this.isResume = true;     //正在继续播放
    this.isPause = false;     //不是暂停状态
},

4. 退出播放

//清除所有语音播报创建的队列
cancel() {
    window.speechSynthesis.cancel();
    this.isPlay = false;      //关闭播放状态，
    this.isResume = false;     //不在继续播放
    this.isPause = false;     //不是暂停状态
},

5. 利用状态控制按钮

<span>
     <i class="fa fa-play-circle-o" @click="playRead" v-if="!isPlay"></i>
     <i class="fa fa-pause-circle-o" @click="pause" v-if="isPlay && !isPause"></i>
     <i class="fa fa-play-circle-o" @click="resume" v-if="isPause"></i>
     <i class="fa fa-stop-circle" @click="cancel" v-if="isPlay"></i>
</span>

API总结：

语音合成Speech Synthesis 的核心 API ：SpeechSynthesisUtterance 和 speechSynthesis

使用步骤：

1. 利用new关键字实例化一个 SpeechSynthesisUtterance 对象

2. 给实例化对象添加语音合成的属性

text – 要合成的文字内容，字符串。

lang – 使用的语言，字符串，例如："zh-cn"

voiceURI – 指定希望使用的声音和服务，字符串。

volume – 声音的音量，区间范围是0到1，默认是1。

rate – 语速，数值，默认值是1，范围是0.1到10，表示语速的倍数，例如2表示正常语速的两倍。

pitch – 表示说话的音高，数值，范围从0（最小）到2（最大）。默认值为1。

3. 实例化对象的一些方法