我们网友在浏览一些博客的时候是否有看到过在内容上面有可以选择语音朗读功能,看着感觉还是蛮炫酷的。尤其是我们有针对移动端的网站阅读体验比较好,比如一些内容教程、小说类型的网站可以使用这样的功能。于是老蒋搜索相关的教程看看是如何加上去的。这里我们一般是使用的是百度提供的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目录中,有其他播放按钮和样式我们可以自行调整。我们一起看看效果:

声明:
芒果源码,一个精品商业网站源码分享平台 WWW.OKMG.CN
请务必线上支付,通过线下支付的出现任何问题平台均不担保! 1. 本站所有资源来源于用户上传和网络,均不允许转载,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 如发现会员恶意下载,传播,或用于违法用途,本站有权封禁账号,并积极配合有关部门调查
4. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
5. 本站提供的源码、模板、插件等等其他资源(除商业源码分类),都不包含技术服务请大家谅解!
6. 如有链接无法下载、失效或广告,请联系管理员处理!
7. 本站资源售价和会员费只是赞助,收取费用仅维持本站的日常运营所需!
8. 如遇到加密压缩包,默认解压密码为"www.okmg.cn",如遇到无法解压的请联系管理员!
9.本站客服QQ:29139260
10.如您发现本站分享的源码,侵犯了您的权益,请联系:29139260#qq.com #换成@
芒果源码,一个精品商业网站源码分享平台 WWW.OKMG.CN
请务必线上支付,通过线下支付的出现任何问题平台均不担保! 1. 本站所有资源来源于用户上传和网络,均不允许转载,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 如发现会员恶意下载,传播,或用于违法用途,本站有权封禁账号,并积极配合有关部门调查
4. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
5. 本站提供的源码、模板、插件等等其他资源(除商业源码分类),都不包含技术服务请大家谅解!
6. 如有链接无法下载、失效或广告,请联系管理员处理!
7. 本站资源售价和会员费只是赞助,收取费用仅维持本站的日常运营所需!
8. 如遇到加密压缩包,默认解压密码为"www.okmg.cn",如遇到无法解压的请联系管理员!
9.本站客服QQ:29139260
10.如您发现本站分享的源码,侵犯了您的权益,请联系:29139260#qq.com #换成@
全功能WordPress水印插件 - WPWaterMark 实现随机和满铺水印效果
上一篇
2020-03-18
给wordpress主题增加点赞功能
2020-03-18
下一篇
请务必线上支付,通过线下支付的出现任何问题平台均不担保!