vue实现语音播报_vue语音播报

使用百度语音解析

1. 新建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
}

1
2
3
4
5
6
7

• main.js注册原型

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

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

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

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

• audio标签 controls

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

• 自定义样式
  

 <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()
     }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

使用录的语音 语音合成器

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

1. audio标签

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

2. 在合适的时机调取播放

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

录音纯js实现

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

有道

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

SpeechSynthesisUtterance

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

属性

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

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