通过百度 语音接口 http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=
遍历网页文本 进行分段读取来进行朗诵页面。代码如下(仅供参考,请勿用于商业用途):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>---测试---</title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<button onclick="PalyAudio(1,'.text')">播放</button>|||||<button onclick="PalyAudio(2,'.text')">停止</button>
<div>
<div class="text">
<p>
臣亮言:先帝创业未半,而中道崩殂;今天下三分,益州疲敝,此诚
危急存亡之秋也。然侍卫之臣,不懈于内;忠志之士,忘身于外者:盖追
先帝之殊遇,欲报之于陛下也。诚宜开张圣听,以光先帝遗德,恢弘志士
之气;不宜妄自菲薄,引喻失义,以塞忠谏之路也。宫中府中,俱为一体;
陟罚臧否,不宜异同:若有作奸犯科,及为忠善者,宜付有司,论其刑赏,
以昭陛下平明之治;不宜偏私,使内外异法也。侍中、侍郎郭攸之、费依、
董允等,此皆良实,志虑忠纯,是以先帝简拔以遗陛下:愚以为宫中之事,
事无大小,悉以咨之,然后施行,必得裨补阙漏,有所广益。将军向宠,
性行淑均,晓畅军事,试用之于昔日,先帝称之曰“能”,是以众议举宠
为督:愚以为营中之事,事无大小,悉以咨之,必能使行阵和穆,优劣得
所也。亲贤臣,远小人,此先汉所以兴隆也;亲小人,远贤臣,此后汉所
以倾颓也。先帝在时,每与臣论此事,未尝不叹息痛恨于桓、灵也!侍中、
尚书、长史、参军,此悉贞亮死节之臣也,愿陛下亲之、信之,则汉室之
隆,可计日而待也。
</p>
<p>
臣本布衣,躬耕南阳,苟全性命于乱世,不求闻达于诸侯。先帝不以
臣卑鄙,猥自枉屈,三顾臣于草庐之中,谘臣以当世之事,由是感激,遂
许先帝以驱驰。后值倾覆,受任于败军之际,奉命于危难之间:尔来二十
有一年矣。先帝知臣谨慎,故临崩寄臣以大事也。受命以来,夙夜忧虑,
恐付托不效,以伤先帝之明;故五月渡泸,深入不毛。今南方已定,甲兵
已足,当奖帅三军,北定中原,庶竭驽钝,攘除奸凶,兴复汉室,还于旧
都:此臣所以报先帝而忠陛下之职分也。至于斟酌损益,进尽忠言,则攸
之、依、允等之任也。愿陛下托臣以讨贼兴复之效,不效则治臣之罪,以
告先帝之灵;若无兴复之言,则责攸之、依、允等之咎,以彰其慢。陛下
亦宜自谋,以谘诹善道,察纳雅言,深追先帝遗诏。臣不胜受恩感激!今
当远离,临表涕泣,不知所云。
</p>
<p>
先帝虑汉、贼不两立,王业不偏安,故托臣以讨贼也。以先帝之明,
量臣之才,故知臣伐贼,才弱敌强也。然不伐贼,王业亦亡。惟坐而待亡,
孰与伐之?是故托臣而弗疑也。臣受命之日,寝不安席,食不甘味;思惟
北征,宜先入南:故五月渡泸,深入不毛,并日而食。——臣非不自惜也:
顾王业不可偏安于蜀都,故冒危难以奉先帝之遗意。而议者谓为非计。今
贼适疲于西,又务于东,兵法“乘劳”:此进趋之时也。谨陈其事如左:
</p>
<p>
高帝明并日月,谋臣渊深,然涉险被创,危然后安;今陛下未及高帝,
谋臣不如良、平,而欲以长策取胜,坐定天下:此臣之未解一也。刘繇、
王朗,各据州郡,论安言计,动引圣人,群疑满腹,众难塞胸;今岁不战,
明年不征,使孙策坐大,遂并江东:此臣之未解二也。曹操智计,殊绝于
人,其用兵也,仿怫孙、吴,然困于南阳,险于乌巢,危于祁连,逼于黎
阳,几败北山,殆死潼关,然后伪定一时耳;况臣才弱,而欲以不危而定
之:此臣之未解三也。曹操五攻昌霸不下,四越巢湖不成,任用李服而李
服图之,委任夏侯而夏侯败亡,先帝每称操为能,犹有此失;况臣弩下,
何能必胜:此臣之未解四也。自臣到汉中,中间期年耳,然丧赵云、阳群、
马玉、阎芝、丁立、白寿、刘合、邓铜等,及驱长屯将七十余人,突将无
前,丛叟、青羌,散骑武骑一千余人,此皆数十年之内,所纠合四方之精
锐,非一州之所有;若复数年,则损三分之二也。——当何以图敌:此臣
之未解五也。今民穷兵疲,而事不可息;事不可息,则住与行,劳费正等;
而不及今图之,欲以一州之地,与贼持久:此臣之未解六也。
</p>
<p></p>
<p>
夫难平者,事也。昔先帝败军于楚,当此时,曹操拊手,谓天下已定。
——然后先帝东连吴、越,西取巴、蜀,举兵北征,夏侯授首:此操之失
计,而汉事将成也。——然后吴更违盟,关羽毁败,秭归蹉跌,曹丕称帝:
凡事如是,难可逆见。臣鞠躬尽瘁,死而后已;至于成败利钝,非臣之明
所能逆睹也。
</p>
</div>
</div>
<script>
var audioArray = [];
var mp3 = "";
function GetAudioArray(doName) {
$(doName).map(index => {
let _this = $(doName).eq(index);
var text = _this.text();
if (text) {
//长度判断 这个接口有长度限制 其次get请求也有长度限制,因此这里做分段处理 用500 个长度我觉得是比较好的了。
if (text.length > 500) {
let list = group(text, 500);
list.map(content => {
audioArray.push("http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=" + content);
});
} else {
audioArray.push("http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=" + text);
}
}
});
}
//播放音频
function ForPalyAudio(index) {
//监听到播放结束后,在此处可调用自己的接口
if (index >= audioArray.length) {
alert("播放完毕");
return;
}
mp3 = new Audio(audioArray[index]);
mp3.play();
mp3.addEventListener('ended', function () {
ForPalyAudio(index + 1);
}, false);
}
//字符串分组
function group(str, len) {
var r = [];
function doGroup(s) {
if (!s) return;
r.push(s.substr(0, len));
s = s.substr(len);
doGroup(s)
}
doGroup(str);
return r;
}
//播放函数
function PalyAudio(type, doName) {
if (type == 1) {
GetAudioArray(doName);
ForPalyAudio(0);
} else if (type == 2) {
//停止
mp3.pause();
} else {
alert("错误的类型");
}
}
//console.log(audioArray);
</script>
</body>
</html>