WordPress内容添加TTS语音朗读功能 人工朗读博文内容

WordPress内容添加TTS语音朗读功能 人工朗读博文内容

我们网友在浏览一些博客的时候是否有看到过在内容上面有可以选择语音朗读功能,看着感觉还是蛮炫酷的。尤其是我们有针对移动端的网站阅读体验比较好,比如一些内容教程、小说类型的网站可以使用这样的功能。于是老蒋搜索相关的教程看看是如何加上去的。这里我们一般是使用的是百度提供的TTS(Text To Speech)文本到语音功能。

这里我直接找到一个可以直接使用也不是复杂的参考过来,如果有需要的网友可以使用,我测试后是可以使用的。这里参考:https://www.llss.us/6198

    <?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; ?>

 

这里我们将代码添加到WordPress single.php模板页面中的内容前面。里面有两个按钮。

这里我们可以根据实际需要添加到网站主题中的images目录中,有其他播放按钮和样式我们可以自行调整。我们一起看看效果:

WordPress内容添加TTS语音朗读功能 人工朗读博文内容

请务必线上支付,通过线下支付的出现任何问题平台均不担保!

相关推荐

在WordPress媒体库中创建文件夹

在WordPress媒体库中创建文件夹下面由WordPress教程栏目给大家介绍如何...

Wordpres多站点配置(站群建设)详细方法

现在Wordpress是全国甚至全世界最多人用的网站系统,利用Wordpress做站...

网站首次如何圈住用户

Yzipi.com用户留存率达38%以上,用户人均浏览页面6.8个以上,用户一周二次...

2020年最新WordPress安装详细教程,还在问wordpress如何安装?这篇文章解决问题

2020年最新WordPress安装详细教程,还在问wordpress如何安装?这篇...

发表评论

登录... 后才能评论