通过百度 语音接口 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>
4484
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
