开 2020年11月2日 In 《啃》知识

整理WordPress内容添加百度TTS人工语音朗读博文内容功能笔记

prolicn

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

这里我直接找到一个可以直接使用也不是复杂的参考过来,如果有需要的网友可以使用,我测试后是可以使用的。效果可以看这里:https://www.gushiku.cn/qinggangushi/aiqinggushi/604.html

<!--语音播放-->
<div style="background: #037ef3;border-radius: 55px;padding: 15px;overflow: hidden;width: 150px;height: 24px;margin: 0 auto;margin-bottom: 10px; color: #fff;">
    <?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 <= 92700): ?>
    <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  style="float: left;margin-right: 10px;cursor: pointer;"> <a style="color: #fff;" href="javascript:playPause();"><img src="<?php bloginfo('template_url');
?>/img/bofang.png" width="25" height="25" style=" margin-right: 10px;float: left;" id="music_btn01" border="0">在线语音播放</a></span>
<?php endif; ?>
</div>
<!--语音播放-->

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

bofang
zanting

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

效果可以看这里:https://www.gushiku.cn/qinggangushi/aiqinggushi/604.html

prolicn

有事没事大家坐下来聊聊天,吹吹牛.....
Keep up with me on我的网站

发表评论

电子邮件地址不会被公开。 必填项已用*标注