使用百度语音解析
- 新建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>