查看更多

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

前言

最近来访我博客的朋友有没有发现一个新功能?在每篇文章评论栏的最下方有一个播放器的图标,你只要轻轻一点,就可以听到百度语音朗读我的文章!

很多人没办法看完整篇文章,有的只是看看标题就马上去评论。这种现象应该很多,包括我自己。因此老铁郑永博客的博主就折腾了这样一个功能。这个朗读完全可以让你边做其他事情,边听完文章。

独乐乐不如众乐乐。我将郑永博客的教程分享给各位朋友。

先来看看最核心的部分:

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

以下代码加在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): ?> //2700可改为更大数字,亲测2000字以上文章可朗读
<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'); ?>/img/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'); ?>/img/bofang.png'; //暂停图片
}
}
</script>
<span  class="du">
<a href="javascript:playPause();"><img src="<?php bloginfo('template_url');
?>/img/bofang.png" width="25" height="25" id="music_btn01" border="0"></a>
</span>
<?php endif; ?>

播放器的按钮下载本站的就可以,注意修改代码中的图片地址。关于播放器的位置,我询问了郑永博主,但是由于我笨拙,他帮我调试好了,但是我仍然没弄好,就这样把播放器位置放到了最底下。

按钮的位置css调整:

.du {
float: left;
margin-right: 10px;
cursor: pointer;
}

以上便是全部的教程。感谢郑永博主为我们折腾出这样一个新潮功能。以后大家来访我的博客,可以选择阅读和听读了哈哈!(教程来源:https://xptt.com/654048.html)

显示评论 (47)

文章评论

  • This information is worth everyone’s attention. How can I find out
    more?

    • 本文作者
    • 回复
  • Hmm it looks like your site ate my first comment (it
    was extremely long) so I guess I’ll just sum it up what I wrote
    and say, I’m thoroughly enjoying your blog. I too am an aspiring blog blogger but
    I’m still new to everything. Do you have any tips and hints for
    inexperienced blog writers? I’d genuinely appreciate it.

    • 本文作者
    • 回复
  • Excellent blog here! Also your site loads up very fast!
    What web host are you using? Can I get your affiliate link to your host?
    I wish my web site loaded up as fast as yours lol

    • 本文作者
    • 回复
  • We’re a group of volunteers and starting a new scheme in our community.
    Your website offered us with valuable info
    to work on. You have done an impressive job and our entire community will be grateful to you.

    • 本文作者
    • 回复
  • I think the admin of this web site is in fact working hard
    in support of his web page, because here every stuff is quality based stuff.

    • 本文作者
    • 回复
  • I every time spent my half an hour to read this weblog’s posts every day
    along with a mug of coffee.

    • 本文作者
    • 回复
  • Thank you for the auspicious writeup. It in fact was a amusement account it.

    Look advanced to more added agreeable from you!
    By the way, how could we communicate?

    • 本文作者
    • 回复
  • Incredible quest there. What occurred after? Thanks!

    • 本文作者
    • 回复
  • Hi mates, how is the whole thing, and what you wish
    for to say concerning this piece of writing, in my view its truly amazing in favor of me.

    • 本文作者
    • 回复
  • Hello, I enjoy reading all of your article post. I like to write a
    little comment to support you.

    • 本文作者
    • 回复
  • Heya i am for the first time here. I found this board and I to find
    It really useful & it helped me out much. I am hoping to offer one
    thing back and help others like you aided me.

    • 本文作者
    • 回复
  • 这个API很早就有了,但确实没多大实用性。不过今天看了你这个,我忽然想到可以做一些产品说不定能盈利,比如说段子网、微小说网、黄网等,加上自动语音的功能,手机上就能听……不过大概会被停掉API吧。

    • 本文作者
    • 回复
  • 可以,考虑抽空试试。

    • 本文作者
    • 回复
  • 给需要的人,个人博客我一直能精简的都精简,来换取速度!

    • 本文作者
    • 回复

相关推荐

WordPress添加豆瓣书影记录——bmdb插件介绍

介绍一款一条龙全自动添加豆瓣书影记录的插件。该插件为熊野在基于牧风的项目上开发的WordPress插件。 在该页面申请Secret:https://bm.weajs.com/另外还需要填写你的豆瓣id…

又一次折腾博客,这次换主题了

正如文章标题所说,我又换主题了。上一次换主题是6月份的时候,花钱买了Begin正版主题,刚开始是喜欢Begin大气的风格,功能多,样式好看,特别是方框式的评论框,知更鸟大神真厉害!但是我觉得我希望我博…