给博客添加TTS语音朗读 简单快速版

很多人不解为什么要加这个功能,我说我自己会用你可能不相信,哈哈。。我自己有收藏文章,有时候会听一下。

另外,我发现很多人没办法看完整篇文章,有的只是看看标题就马上去评论,有这个现象吧?那这个朗读完全可以让你边做其他事情,边听完文章。

至少我经常这样,曾经还特意用具有tts朗读功能的rss订阅器,一边做事情,一边听完文章,效果还是不错的,刚听可能会感觉声音比较机器,但现在的语音效果比微软的好太多了,很多机器人都用这个语音。

为了加上这个功能,在这方面花了不少心思,上次的方法代码太多,影响文章页加载时间,为了提高速度,我突然想用ajax方式,当我传递参数到function一切准备就绪的时候,JavaScript代码无法在function里面运行。

当然还有其他更专业的方法,我不是专业,折腾不来,不过,要说精简代码,及时是最简单的js播放器也要117行代码,我发现在我能折腾的范围内,还是最初研究的那个方法最简单。

后来还发现,可以不用官方的那些复杂代码,直接用之前的方式,不是百度语音不稳定,是之前没有对文章进行去除特殊代码造成的某些文章无法播放,js获取文章内容也行的,甚至分割去除特殊字符等等,但在这里还是选择php处理。

http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=后面加上900字以内的内容就可以正常朗读

这回声音也是女的,直接点击上面就可以听。

好吧,废话完了,代码很少,你几乎直接粘贴在content前面就OK ,这回加载速度很快,几乎没影响。

以下代码加在single.php页面的任何你想插入的地方:

<?php
function mbStrSplit ($string, $len = 1) { //对内容进行分割
$start = 0;
$strlen = mb_strlen($string);
while ($strlen) {
$array[] = mb_substr($string,$start,$len,"utf8");
$string = mb_substr($string, $len, $strlen,"utf8");
$strlen = mb_strlen($string);
}
return $array;
}

function match_chinese($chars,$encoding = 'utf8') //过滤特殊字符串
{
$pattern = ($encoding == 'utf8')?'/[\x{4e00}-\x{9fa5}a-zA-Z0-9,,。 ]/u':'/[\x80-\xFF]/';
preg_match_all($pattern,$chars,$result);
$temp = join('',$result[0]);
return $temp;
}
$str=$post->post_content;
$str = strip_tags($str);
$str = str_replace("、",",",$str); //保留顿号
$str = match_chinese($str);
$zishu = mb_strlen(preg_replace('/\s/','',html_entity_decode(strip_tags($str))),'UTF-8');
$r = mbStrSplit($str, 900);
$qian = "http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=";
?>
<?php if ($zishu <= 2700): ?>
<video id="langdu" style="display:none">
<source id="source" src="<?php echo $qian.$r[0]; ?>" type="video/mp4">
</video>
<script type="text/javascript">
function playPause() {
var music = document.getElementById('langdu');
var music_btn = document.getElementById('music_btn01');

if (music.paused) {
music.play();
music_btn.src = '<?php bloginfo('template_url'); ?>/images/zanting.png'; //播放图片
var aud = document.getElementById("langdu");
aud.onended = function() {
aud.src = "<?php echo $qian.$r[1]; ?>"
aud.play();
aud.addEventListener("ended", function() {
aud.src = "<?php echo $qian.$r[2]; ?>"
aud.play();
aud.addEventListener("ended", function() {
aud.pause();
}, false);
}, false);
};

} else {
music.pause();
music_btn.src = '<?php bloginfo('template_url'); ?>/images/bofang.png'; //暂停图片
}
}

</script>

<span  style="float: left;
margin-right: 10px;
cursor: pointer;">
<a href="javascript:playPause();"><img src="<?php bloginfo('template_url');
?>/images/bofang.png" width="25" height="25" id="music_btn01" border="0"></a>
</span>

<?php endif; ?>

按钮图片自己下载本站的,按钮的位置css调整。

最后,写代码确实得心细和逻辑思考,否则会有很多不必要的服务器请求,那么就造成运行速度上的差别。

分类:网络博客 标签:,,

上一篇:WordPress新编辑器之初体验

下一篇:升级PHP记账代码让其支持新版PHP

已经有51条评论!

Loading...
  1. 嗯,typecho怎么弄呢?

    16F
  2. 嗯,我看到了那个评论,我现在也在我的网站里配置了。不过,那个字数限制是怎么回事?我把$zishu <= 2700
    改成了$zishu <= 100000,这样没什么关系吧?

    17F
  3. 嗯,为什么会有字数限制呢?超过2700多一点就读不了了,不过应该怎么解决呢?

    18F
  4. 我刚刚看到讯飞语音合成好像有免费额度,你能不能去看看 [咧嘴笑] https://www.xfyun.cn/services/online_tts

    19F
    • @夜阑浇酒 那个要申请接口,太麻烦,不想折腾哈,你可以继续搜搜有没有人做好的,我这个感觉已经够用了,想读长一点,分多段。

    • @郑永 那应该怎么多分段呢?要添加或者修改哪些代码呢?是不是在
      aud.onended = function() {
      aud.src = “”
      aud.play();
      aud.addEventListener(“ended”, function() {
      aud.src = “”
      aud.play();
      后面加上
      aud.addEventListener(“ended”, function() {
      aud.src = “”
      aud.play();
      一直叠加?

    • @郑永 刚刚写错了,我在后面叠加了
      aud.addEventListener(“ended”, function() {
      aud.src = “”
      aud.play();
      4、5、6、7、8、9…….
      查看源代码有语音资源,但是却无法播放
      所以说这个无法突破字数限制吧?

    • @夜阑浇酒 把$zishu <= 2700改大,然后aud.addEventListener("ended", function() {
      aud.src = "”
      aud.play(); 里面的2 多加几个 3 4 5 6 7 8 9或则用其他自动musicList判断循环方式。

  5. 大神!typecho 需要修改哪里?

    20F
    • @似水流年 把上面代码里面的图片地址改成你的,记得下载图片上传的你的站。 最后关键一步:把代码里面的$str=$post->post_content;改成 $str=$this->excerpt 完工。

怎么样?你也说一句吧!

gravatar

冷笑 忧伤 恶魔 笑脸 红脸 咧嘴笑 吃惊 惊讶 困惑 耍酷
大笑 抓狂 痛苦 转眼珠 眨眼 好主意 囧 无表情 哭泣 坏笑