百度语音合成

voice.html

<div class="container">

<div class="container_top">
<center> <button class="btnstart">朗读</button> </center>      
</div>
<div class="container_content">

 朗读的内容（自填）

</div>
<div class="container_content1"></div>
</div>

voice.js

//1.获取需要朗读的内容,且将其划分为数组，规定按照标点划分，在按规定的字符数进一步划分
var content=$(".container_content").text();
//console.log(content);
// 1.1定义所需的参数
var rLength=40;//规定一次传输的字符长度
var  arr=[];//规定划分最终划分好的数组
var Zlength=content.length;//需要朗读内容的总长度

第一次划分,按照规定长度划分内容
//var cc=content.substr(0,rLength);
//console.log(cc);
按照字符长度划分后,找寻最后一个字符是否为标点符号，常见5种中文符号,第多少个字符，数值判断
//var douhao=cc.lastIndexOf("，");//一段字符的最后为逗号
console.log(douhao);
//var juhao=cc.lastIndexOf("。");//一段字符的最后为句号
console.log(juhao);
//var wenhao=cc.lastIndexOf("？");//一段字符的最后为问号
console.log(wenhao);
//var gantan=cc.lastIndexOf("！");//一段字符的最后为感叹号
console.log(gantan);
//var fenhao=cc.lastIndexOf("；");//一段字符的最后是否为分号
console.log(fenhao);
判断最后的符号究竟为哪一个,如果最后不为符号，向前寻找符号划分，哪一个符号的值最大为最后一个
//var max=douhao; //假设，最后一个逗号的值最大，依次和别的符号比较，找出最大值
//if(juhao>max){max=juhao}
//if(wenhao>max){max=wenhao}
//if(gantan>max){max=gantan}
//if(fenhao>max){max=fenhao}
判断如果字符串太长而没有符号，则遵循规定值划分
//if(max==-1){
// max=rLength;
//}
所以按照符号划分的第一段为
//cc=cc.substr(0,max+1);
//console.log(cc);
//arr.push(cc);
//console.log(arr);
将剩余的长度的内容赋予content
//content=content.substr(max+1);
//console.log(content);
第二次划分,重复第一次的划分
//cc=content.substr(0,max+1);

//1.2所以循环划分,使用while划分,具体参照流程如上所示
while(Zlength>rLength){  //条件，划分字段的长度大于规定的长度，划分字段为变值
var cc=content.substr(0,rLength);
var douhao=cc.lastIndexOf("，");//一段字符的最后为逗号的位置
var juhao=cc.lastIndexOf("。");//一段字符的最后为句号的位置
var wenhao=cc.lastIndexOf("？");//一段字符的最后为问号的位置
var gantan=cc.lastIndexOf("！");//一段字符的最后为感叹号的位置
var fenhao=cc.lastIndexOf("；");//一段字符的最后是否为分号的位置
var max=douhao; 
if(juhao>max){max=juhao}
if(wenhao>max){max=wenhao}
if(gantan>max){max=gantan}
if(fenhao>max){max=fenhao}
if(max==-1){
max=rLength;
}

cc=cc.substr(0,max+1);
//将剩余的长度的内容赋予content
content=content.substr(max+1);
//第二次划分,重复第一次的划分，将划分字段重新求长度
arr.push(cc);
Zlength=content.length;
}
arr.push(content);
//1.3高量显示要求,将分割为的每一个字符串放入到一个标签中,保持原文样式
for(var i=0;i<arr.length;i++){
$(".container .container_content").remove();
$(".container_content1").show();
$(".container_content1").append("<b>"+arr[i]+"</b>");
$(".container_content1 b").css({'fontWeight':'normal'});
}

//console.log(arr);

//2.百度语音信息获取
//text=arr[i]必填，合成的文本，使用UTF-8编码，小于512个中文字或者英文数字，转换为GBK后长度小于1024个字节


//请求获取有效的access_token 重要，参考百度语音的鉴权认证机制
//grant_type：必须参数，固定为“client_credentials”；
//client_id：必须参数，应用的 API Key；
//client_secret：必须参数，应用的 Secret Key;
//https://openapi.baidu.com/oauth/2.0/token?grant_type=client_credentials&client_id=Va5yQRHl********LT0vuXV4&client_secret=0rDSjzQ20XUj5i********PQSzr5pVw2

var tok="24.141f00160ae6dd1d75ffb609bce6084b.2592000.1524558776.282335-9786462";    //必填,获取到的开发者的access_token，有效期一个月，可以对其有效性进行判断
var cuid=parseInt(Math.random()*100000000);//必填 用户唯一标识，用来区分用户，计算UV值。建议填写能区分用户的机器 MAC 地址或 IMEI 码，长度为60字符以内
//ctp 必填 客户端类型选择，web端填写固定值1
//lan 必填 固定值zh。语言选择,目前只有中英文混合模式，填写固定值zh
//spd 选填 语速，取值0-9，默认为5中语速
//pit 选填 音调，取值0-9，默认为5中语调
//vol 选填 音量，取值0-15，默认为5中音量
//per 选填 发音人选择, 0为普通女声，1为普通男生，3为情感合成-度逍遥，4为情感合成-度丫丫，默认为普通女声
var expires_in=259200000;//设置过期时间
var timeOut=0;//设置计时器，重新获取新的access_token值
//2.1获取access_token,
timeOut=setInterval(function(){
$.ajax({
type:"post",
url:"voice.php",
success:function(res){
console.log(res);
tok=(JSON.parse(res)).access_token;
clearInterval(timeOut);
location.reload();
}
});
},expires_in)


//3语音合成,朗读文章
//https://tsn.baidu.com/text2audio?tex=***&lan=zh&cuid=***&ctp=1&tok=*** 重点，传输朗读
var audio=document.createElement('audio');//创建audio
var contentB=document.querySelectorAll(".container_content1 b");
var n=0;//定义传输数组的哪一个字段值
var flag=false;//定义类似开关的作用，使朗读和暂停切换
var flagT=1;  //避免点击同一个按钮而从新开始，当值为1时朗读，值为0时暂停
$(".btnstart").on('click',function(){
if(flag==false){
$(".btnstart").text("暂停");
if(flagT==1){
audio.src="https://tsn.baidu.com/text2audio?tex="+arr[n]+"&lan=zh&cuid="+cuid+"&ctp=1&tok="+tok;
}
console.log(flagT);
audio.play();
$(".container_content1 b").css({background:'white',color:'black'});
contentB[n].style.background="green";
contentB[n].style.color="red";
contentB[n].style.fontWeight="bold";
audio.onended =function(){
timeOut=setInterval(function(){
n++;
audio.src="https://tsn.baidu.com/text2audio?tex="+arr[n]+"&lan=zh&cuid="+cuid+"&ctp=1&tok="+tok;
audio.play();
$(".container_content1 b").css({background:'white',color:'black',fontWeight:'normal'});
if(n>(arr.length-1)){
n=0;
window.location.reload();
}
contentB[n].style.background="green";
contentB[n].style.color="red";
contentB[n].style.fontWeight="bold";
clearInterval(timeOut);
},1000);
}
flag=true;
}else{
flagT=0;
$(".btnstart").text("朗读");
console.log(flagT);
audio.pause();
flag=false;
}
})

voice.php

<?php
header('Content-Type: text/html; charset=utf-8');
header("Access-Control-Allow-Origin:*");
$ch = curl_init();//创建一个cURL资源
//设置url和相关选项,获取access_token等一系列参数
curl_setopt($ch, CURLOPT_URL,https://openapi.baidu.com/oauth/2.0/token?grant_type=client_credentials&client_id=Va5yQRHl********LT0vuXV4&client_secret=0rDSjzQ20XUj5i********PQSzr5pVw2);  
//抓取url传递给浏览器
curl_exec($ch);
//关闭cURl并且释放系统资源
curl_close($ch);
?>

用到相关知识点

//字符串的分割
substr(start,length) 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
start 必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
length 可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。

lastIndexOf(searchvalue,fromindex) 方法可返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索
searchvalue 必需。规定需检索的字符串值。

fromindex 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。

//audio知识
<audio> 标签定义声音，比如音乐或其他音频流。
play() 方法开始播放当前的音频或视频。注释：Internet Explorer 8 以及更早版本不支持该方法。
pause() 方法停止（暂停）当前播放的音频或视频。
onended 事件在视频/音频（audio/video）播放结束时触发。