H5语音识别/合成 波形图
2020-06-09 本文已影响0人
李霖弢
语音识别(兼容性较差)
var newRecognition = new webkitSpeechRecognition();
语音合成
即文字转语音
let msg = new window.SpeechSynthesisUtterance('你好，我是康师傅');
document.body.onclick = function () {
window.speechSynthesis.speak(msg);
}
SpeechSynthesisUtterance实例属性和回调
- text – 文字内容
- lang – 语言，如："zh-cn"
- voiceURI – 指定希望使用的声音和服务，字符串。
- volume – 音量，0~1，默认1。
- rate – 语速，0.1~10，默认1。
- pitch – 音调，0~2，默认1。
- onstart
- onpause
- onresume
- onend
speechSynthesis 方法
speak() – 传入SpeechSynthesisUtterance实例，读合成的话语。
stop() – 终止合成过程。
pause() – 暂停合成过程。
resume() – 重新开始合成过程。
getVoices – 返回浏览器支持的语音包列表
波形图插件 wfplayer
<script src="https://github.com/zhw2590582/WFPlayer/tree/master/dist/wfplayer.js"></script>
<body>
<div id="waveform" style="width: 1000px; height: 300px"></div>
<audio id="audio" src="./bg.mp3" autoplay></audio>
</body>
<script>
var wf = new WFPlayer({
container: document.querySelector('#waveform'),
backgroundColor: 'rgba(100, 100, 100,0.5)',
waveColor: 'red',
cursor: true,
progress: true,
progressColor: 'rgba(100, 100, 100, 0.5)',
grid: false,//网格
ruler: false,//时间刻度
duration: 10
});
wf.load(document.querySelector('#audio'));
</script>
