记一次懒人功能添加-语音阅读

本教程基于鸟叔的begin主题修改,今天突然发疯想弄个语音阅读功能在wordpress主题上

效果图:记一次懒人功能添加-语音阅读-幂构社区

其实文本阅读功能就是TTS(Text To Speech),即“从文本到语音”,是人机对话的一部分,让机器能够说话。百度有很多教程的,直接上代码啊了

[wechat key=337 reply=语音阅读]

<?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'); ?>/baiduaip/bdapi/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'); ?>/baiduaip/bdapi/bofang.png'; //暂停图片地址,自己修改
}
}

</script>
//样式文件,自己修改适配自己的主题哈
<style>
	.AudioWrap{position: absolute;top: 60px;left: -1px;}
	#AudioPlayer{
	display: inline-flex;
    justify-content: center;
    color: #fff;
    margin-bottom: 10px;
	background: linear-gradient(90deg,#50c0ff,#20a0ff 8%,#50c0ff);
    box-shadow: 2px 4px 8px rgba(0,150,255,.3);
    border-radius: 0 100px 100px 0;
    padding: 4px 3px 4px 12px;
    animation: swipLeft .5s;
	width: 100px;
	height: 34px;
	}
</style>

<div class="AudioWrap">
	<div id="AudioPlayer">
		<span style="position: absolute;left: 6px;">朗读本文</span>
		<span style="position: absolute;top: 8px;right: 6px;cursor: pointer;">
			<a href="javascript:playPause();">
				<img src="<?php bloginfo('template_url');
	?>/baiduaip/bdapi/bofang.png" width="20" height="20" id="music_btn01" border="0">
			</a>
		</span>
	</div>
</div>
<?php endif; ?>

[/wechat]

鸟叔的begin主题可以下载后直接放在主题文件夹中,修改template/content.php文件,在适当位置映入文件

引用代码:

<?php get_template_part( 'baiduaip/AipS' ); ?>

博主放的位置如下图:记一次懒人功能添加-语音阅读-幂构社区

只能参考,博主以前修改过主题文件

资源下载此资源仅限注册用户下载,请先
1、本站所有内容归原作者所有,与本站无关
2、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者同意,注明来源
3、本站大部分资源来源码于网络,仅供学习交流使用,本站不提供任何技术支持,不作任何安全承诺,是否使用请自行判断
4、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其完整性负责
5、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意
6、本站管理员和工作人员有权不事先通知发贴者而删除本文,本站客服Email:service@teelm.com

给TA买糖
共{{data.count}}人
人已赞赏
资源分享

PTCMS4.2.8程序+搭建教程+几条采集规则

2019-10-24 13:30:17

资源分享

ptcms采集规则23条

2019-10-29 20:46:33

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
  • 744 用户总数
  • 1280 文章总数
  • 1637093 浏览总数
  • 0 今日发布
  • 1394 稳定运行
立即加入

加入幂构社区VIP,快速免费获取优质资源!

QQ在线咨询