vue实现语音播报

小曲曲

已于 2024-03-18 17:50:30 修改

阅读量1w

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 语音识别

于 2021-12-09 15:42:53 首次发布

本文链接：https://blog.csdn.net/weixin_43848576/article/details/121821036

版权

vue 专栏收录该内容

141 篇文章 3 订阅

订阅专栏

使用百度语音解析

新建utils/voice.js文件

function voicePrompt (text) {
  new Audio('https://tts.baidu.com/text2audio?cuid=baike&lan=ZH&ctp=2&pdt=301&vol=9&rate=32&per=4&tex=' + text).play()
}
export {
  voicePrompt
}

main.js注册原型

// 语音提醒
import { voicePrompt } from './utils/voice'
Vue.prototype.$voice = voicePrompt

合适的时机调用，并传入文字

this.$voice('您有新的订单，请及时处理')

纯原生自定义录音播放暂停

audio标签 controls

<audio
 controls
 src="http://cdn.xxtao.com/cms/audio/yesterday once more.mp3">
</audio>

自定义样式

 <div style="height:30px;line-height:30px;" class="flex_l">
      <span>通话录音：</span>
      <audio
          id='audio'
          src='http://cdn.xxtao.com/cms/audio/yesterday once more.mp3'
          preload='metadata'>
      </audio>
      <i id="icon1" class="el-icon-video-play pointer size-20" onclick="play(1)"></i>
      <i id="icon2" style="display:none" class="el-icon-video-pause pointer size-20" onclick="play(2)"></i>
 </div>
 
 // 监听录音播放完毕
this.audio = document.querySelector('#audio');
this.audio.addEventListener('ended', e => {
	document.querySelector('#icon2').style.display = 'none'
	document.querySelector('#icon1').style.display = 'block'
});

 // 点击播放暂停录音
  window.play = (e) => {
     if (e == 1) {
         document.querySelector('#icon1').style.display = 'none'
         document.querySelector('#icon2').style.display = 'block'
         this.audio.play()
     } else {
         document.querySelector('#icon2').style.display = 'none'
         document.querySelector('#icon1').style.display = 'block'
         this.audio.pause()
     }
 }

使用录的语音语音合成器

bug：用了几天MP3文件就失效了

audio标签

<audio id="audio" src="https://www.coder.work/pub/text2audio/NAbPPbpW.mp3"></audio>

在合适的时机调取播放

var Music = document.getElementById('audio')
Music.play()

录音纯js实现

var Music = new Audio('https://www.coder.work/pub/text2audio/NAbPPbpW.mp3')
Music.play()

有道

new Audio("http://tts.youdao.com/fanyivoice?word=你好，我是你好&le=zh&keyfrom=speaker-target").play();

SpeechSynthesisUtterance

SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音.也包含一些配置项,指定如何去阅读(语言,音量,音调)等，不支持IE浏览器。

属性

SpeechSynthesisUtterance.lang 获取并设置话语的语言
SpeechSynthesisUtterance.pitch 获取并设置话语的音调(值越大越尖锐,越低越低沉)
SpeechSynthesisUtterance.rate 获取并设置说话的速度(值越大语速越快,越小语速越慢)
SpeechSynthesisUtterance.text 获取并设置说话时的文本
SpeechSynthesisUtterance.voice 获取并设置说话的声音
SpeechSynthesisUtterance.volume 获取并设置说话的音量

方法
speak() 将对应的实例添加到语音队列中
cancel() 删除队列中所有的语音.如果正在播放,则直接停止
pause() 暂停语音
resume() 恢复暂停的语音
getVoices 获取支持的语言数组. 注意:必须添加在voiceschanged事件中才能生效

vue2使用

// 调取语音播报
let playVoice = (data) => {
  const synth = window.speechSynthesis;
  const speech = new SpeechSynthesisUtterance();
  speech.text = "新的公告已发布，请及时个三顿饭付过付付付付付付付付付付付付付付付或"; // 文字内容
  speech.lang = "zh-CN"; // 使用的语言:中文
  speech.volume = 1; // 声音音量：1
  speech.rate = 1; // 语速：1
  speech.pitch = 1; // 音高：1
  synth.speak(speech); // 播放
};

vue3 使用
亲测：bug1：谷歌浏览器不支持播放；edge和360可以
== bug2：需要初始化成功才可播报==

import Speech from "speak-tts";
// 语音播报初始化
const speech = ref(null);
let speechInt = () => {
  speech.value = new Speech();
  speech.value.setLanguage("zh-CN");
  speech.value.volume = 100;
  speech.value.init().then(() => {
    console.log("语音播报初始化完成");
  });
};
speechInt()
// 在某个时机调取播放方法
let playVoice = (text) => {
  console.log(text, 99999999999999999);
  speech.value
    .speak({
      text: text + ',请尽快处理' // 文字内容,
    })
    .then(() => {
      console.log("播报完成");
      speech.value.cancel();
    });
};

vue2 语音播报组件

在这里插入图片描述

<template>
  <div>
    <div class="playArea pd-30 relative play-bg1">
      <div class="over-hidden" style="height: 1.6rem">
        <vue-seamless-scroll :data="listData" @ScrollEnd="ScrollEnd" :class-option="defaultOption" ref="scroll3">
          <div v-for="(item, index) in listData" :key="index">
            {{ item.con }}
          </div>
        </vue-seamless-scroll>
      </div>
      <img v-if="!play" @click="speakTtsSpeech" src="../components/img/play.png"
        style=" position: absolute;bottom: -0.1rem;left: 50%; width: .3rem;height: .3rem;margin-left: -0.15rem;">
      <img v-if="play" @click="speakStop" src="../components/img/stop.png"
        style=" position: absolute;bottom: -0.1rem;left: 50%; width: .3rem;height: .3rem;margin-left: -0.15rem;">
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance();

export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      play: false, // 是否播放
      listData: [{
        con: '党的二十大报告指出，实施积极应对人口老龄化国家战略，发展养老事业和养老产业，优化孤寡老人服务，推动实现全体老年人享有基本养老服务。',
      }, {
        con: '截止2022年末2023年初,徐州沛县常住人口102.67万人，户籍人口126.67万人，男性66.23万人，女性60.44万人。年龄结构中0至14岁占比23.54%，15至59岁占比56.49%，60岁以上占比19.97%，65岁以上占比15.31%。徐州沛县作为江苏省徐州市下辖的一个地区，其老龄化现象较为显著。突出表现在以下几个方面：',
      }, {
        con: '第一：老年人口规模相对较大。第二：存在大量高龄老人，包括百岁以上的长寿老人。第三老龄化趋势明显，与整个徐州市乃至江苏省的普遍态势相符。',
      }],
      listData1: '党的二十大报告指出，实施积极应对人口老龄化国家战略，发展养老事业和养老产业，优化孤寡老人服务，推动实现全体老年人享有基本养老服务。截止2022年末2023年初,徐州沛县常住人口102.67万人，户籍人口126.67万人，男性66.23万人，女性60.44万人。年龄结构中0至14岁占比23.54%，15至59岁占比56.49%，60岁以上占比19.97%，65岁以上占比15.31%。徐州沛县作为江苏省徐州市下辖的一个地区，其老龄化现象较为显著。突出表现在以下几个方面：第一：老年人口规模相对较大。第二：存在大量高龄老人，包括百岁以上的长寿老人。第三老龄化趋势明显，与整个徐州市乃至江苏省的普遍态势相符。'

    }
  },
  computed: {
    defaultOption() {
      return {
        hoverStop: true,
        autoPlay: true,
        step: 0.05, // 数值越大速度滚动越快
        // waitTime: 2000,//单步停止等待时间(默认值 1000ms)
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        direction: 1, // 0向下 1向上 2向左 3向右
        // openWatch: true, // 开启数据实时监控刷新dom
        // singleHeight: 30, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        // singleWidth: 60, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
      };
    },
  },
  beforeDestroy() {
    synth.cancel(msg);
    // this.speakStop()
  },
  methods: {
    speakStop() {
      this.handleStop();
      this.play = false;
      console.log('this.play', this.play);
      // this.$refs.scroll3._cancle()
      // this.$refs.scroll3.reset()
    },
    ScrollEnd() {
      console.log("滚动结束", 6666666)
    },
    speakTtsSpeech() {
      // this.$refs.scroll3._startMove()
      this.play = true;
      this.handleSpeak(this.listData1);
      console.log('开始播放');
    },
    handleSpeak(text) {
      msg.text = text; // 文字内容: 小朋友，你是否有很多问号
      msg.lang = "zh-CN"; // 使用的语言:中文
      msg.volume = 100; // 声音音量：1
      msg.rate = 1; // 语速：1
      msg.pitch = 1; // 音高：1
      msg.onstart = function (event) {
        console.log('开始说话', event);
      };
      synth.speak(msg); // 播放
      // 添加end事件监听器
      msg.onend = () => {
        console.log('语音播报已结束');
        // 可以在此处执行播报结束后需要做的操作
        setTimeout(() => {
          // this.speakTtsSpeech()
          synth.speak(msg); // 重新播放
        }, 2000)
      };
    },
    handleStop(e) {
      msg.text = e;
      msg.lang = "zh-CN";
      msg.volume = 100; // 声音音量：1
      msg.rate = 1; // 语速：1
      msg.pitch = 1; // 音高：1
      synth.cancel(msg);
      console.log('停止');
    },
  }
}
</script>

<style lang="scss" scoped>
@import "./css/rem.scss";

.playArea {
  position: absolute;
  right: .125rem;
  top: .125rem;
  color: #fff;
  z-index: 99;
  width: 3.8rem;
  height: 2.5rem;
}

.play-bg1 {
  background: url('../components/img/bg-play1.png') no-repeat center center;
  background-size: 100% 100%;

}

.play-bg2 {
  background: url('../components/img/bg-play2.png') no-repeat center center;
  background-size: 100% 100%;

}
</style>

小曲曲

关注

3
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
3
评论
vue实现语音播报

使用百度语音解析新建utils/voice.js文件function voicePrompt (text) { new Audio('https://tts.baidu.com/text2audio?cuid=baike&lan=ZH&ctp=2&pdt=301&vol=9&rate=32&per=4&tex=' + text).play()}export { voicePrompt}main.js注册原型// 语音提
复制链接

扫一扫