使用Speech Synthesis API 做语音播放

前提：富文本去除标签，只留下纯文本  == >>  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. 实例化对象的一些方法

        onstart – 语音合成开始时候的回调。

        onpause – 语音合成暂停时候的回调。

        onresume – 语音合成重新开始时候的回调。

        onend – 语音合成结束时候的回调。

4. 接下来是使用 speechSynthesis 对象，主要作用是触发行为，例如读，停，还原等

        speak() – 只能接收SpeechSynthesisUtterance作为唯一的参数，作用是读合成的话语。

        stop() – 立即终止合成过程。

        pause() – 暂停合成过程。

        resume() – 重新开始合成过程。

        getVoices – 此方法不接受任何参数，用来返回浏览器支持的语音包列表，是个数组。

注意：getVoices的获取是个异步的过程，因此，你可以直接在控制台输入，speechSynthesis.getVoices()返回的是一个空数组，没关系，多试几次，或者搞个定时器之类的（定时0秒请求）。
 

参考博客：https://www.jianshu.com/p/92dec635f6c5

 

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

对博客文章的参考，若原文章博主介意，请联系删除！请原谅