前言
项目中，你是否也遇到过这种需求，当触发某个事件时，需要把文字转化成音频播放出来。而很多时候我们会使用已经录制好的MP3文件来进行音频播放，但是此需求中播报的内容可能不固定，这该怎么办呢？
实现方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>百度语音测试</title>
<script type="text/javascript">
function videoPlay(){
var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=&text=" + encodeURI('近日，奚梦瑶何猷君参与录制综艺节目');
var v = new Audio(url);
//v.src = url;
v.loop = true;
v.play();//开始播放
//v.pause();//播放暂停
v.addEventListener('play', function () { //监听播放开始，播放开始执行的函数
console.log("开始播放");
});
v.addEventListener('ended', function () { //监听播放结束
console.log("播放结束");
}, false);
}
</script>
</head>
<body>
<div>
<input type="text" id="ttsText">
<input type="button" id="tts_btn" onclick="videoPlay()" value="播放">
</div>
</body>
</html>
后记
此方法由百度翻译提供，不需要任何插件的支持，联网就能用。另外我们还可以监听音频的各种事件，如开始播放、暂停、加载等等。
音频加载后获取视频的长度
<script>
var elevideo = document.getElementById("video");
elevideo.addEventListener(‘loadedmetadata‘, function () { //加载数据
//视频的总长度
console.log(elevideo.duration);
});
</script>
音频开始播放
<script>
var elevideo = document.getElementById("video");
elevideo.addEventListener(‘play‘, function () { //播放开始执行的函数
console.log("开始播放");
});
</script>
音频正在播放中
v.addEventListener(‘playing‘, function () { //播放中
console.log("播放中");
});
音频加载中
v.addEventListener(‘waiting‘, function () { //加载
console.log("加载中");
});
音频暂停播放
v.addEventListener(‘pause‘, function () { //暂停开始执行的函数
console.log("暂停播放");
});
音频结束播放
v.addEventListener(‘ended‘, function () { //结束
console.log("播放结束");
}, false);
网友评论