当前位置 博文首页 > u012442504的专栏：mui使用百度在线语音合成来制作文字转语音来
上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<div id="">
<textarea id="content" name="" rows="3" cols="20" style="top: 20px;height: 600px;"></textarea>
<input id="play" type="button" class="mui-btn mui-btn-block mui-btn-blue" style="height: 50px;" value="播放"></input>
<input id="puase" type="button" class="mui-btn mui-btn-block mui-btn-blue" style="height: 50px;" value="暂停"></input>
</div>
<script type="text/javascript" charset="utf-8">
var tokenUrl = "https://openapi.baidu.com/oauth/2.0/token";//客户端专用
// var tokenUrl = "https://aip.baidubce.com/oauth/2.0/token"; //服务端专用
var client_id = "API Key";//此处为申请的API Key;
var client_secret = "Secret Key";//此处为申请的Secret Key;
var access_token;
var data = "grant_type=client_credentials&client_id="+client_id+"&client_secret="+client_secret;
var p = document.createElement("audio");//创建一个潜在的audio播放器
mui("body").on("tap","#play",function(){
var tex = document.getElementById("content").value.replace(/[\r\n]/g,"").replace(/\ +/g,"").replace(/-/g, '').trim();//对文本进行去空格和换行；
var a=0,b=0,c=0;
var contentArray = new Array();
if(tex.length/500>=0){//接口上传限制字数，避免出现接口腻出，限制上传字数
for (var i = 0; i < tex.length/500; i++) {
a = a + 500;
splitTex = tex.slice(b,a);
b=a;
contentArray.push(splitTex);
}
}
mui.ajax({
type:"get",
url:tokenUrl,
data:data,
async:true,
success:function(resp){
if(resp.access_token){
access_token = resp.access_token;
var shibieUrl = "http://tsn.baidu.com/text2audio";
tex = encodeURI(encodeURI(contentArray[0]));
var data = "tex="+tex+"&tok="+access_token+"&cuid=00:00:00:00:00:00&ctp=1&lan=zh&spd=5&pit=5&vol=5&per=0&aue=3";
p.controls="controls";
p.src = shibieUrl+"?"+data;
p.play();
c++;
}else{
}
},
error:function(error){
}
});
setTimeout(function(){
p.addEventListener('ended', function () {
if(contentArray.length>0&&c<=contentArray.length-1){
var shibieUrl = "http://tsn.baidu.com/text2audio";
tex = encodeURI(encodeURI(contentArray[c]));
var data = "tex="+tex+"&tok="+access_token+"&cuid=00:00:00:00:00:00&ctp=1&lan=zh&spd=5&pit=5&vol=5&per=0&aue=3";
p.src = shibieUrl+"?"+data;
p.play();
c++;
}else{
c=0;
}
});
},500);
});
mui("body").on("tap","#puase",function(){
if(p.paused) {
p.play();
}else{
p.pause();
}
});
</script>
</body>
</html>直接使用，无需修改。
借鉴于：http://ask.dcloud.net.cn/article/35230，但有错误处，本文已进行修正，放心使用。
服务端的接口和客户端的不一样，客户端因为要必须具备客户端信息才可以，服务端却不用，服务端接口：https://aip.baidubce.com/oauth/2.0/token
cs