给wordpress文章内容加上TTS语音朗读纯代码优化版

于飞云计算

修改于 2019-07-02 10:08:46

2.8K00

代码可运行

文章被收录于专栏：技术经验分享技术经验分享

运行总次数：0

代码可运行

关于为什么给wordpress文章内容加上TTS语音朗读功能的原因是因为我发现很多人没办法看完整篇文章，有的只是看看给wordpress文章内容加上TTS语音朗读纯代码优化版标题就马上去拿资源或者评论，那这个朗读完全可以让你边做其他事情，边听完文章。

此功能是采用的百度语音api接口，但是全百科网并没有用百度官方的那些复杂代码，不是百度语音给的代码不好，而是是之前没有对文章进行去除特殊代码造成的某些文章无法播放，js获取文章内容也行的，甚至分割去除特殊字符等等，但在这里还是选择php处理。接下来是从此功能的技术原理与wordpress程序结合，实现在wordpress中给文章内容加上语音朗读功能的，具体请看下方文章吧。

技术原理

语音合成：也被称为文本转换技术（TTS），它是将计算机自己产生的、或外部输入的文字信息转变为可以听得懂的、流利的口语输出的技术。

1、接口定义

http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=你要转换的文字

参数说明：

lan=zh：语言是中文，如果改为lan=en，则语言是英文。

ie=UTF-8：文字格式。

spd=2：语速，可以是1-9的数字，数字越大，语速越快。

text=**：这个就是你要转换的文字。

2、示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>全百科网文字转语音测试</title>
                <meta name="keywords" content="全百科网,源码下载,简历模版下载,ppt模板免费下载">
                <meta name="description" content="全百科网是集热点信息与网络商业资源分享的多元化信息网络平台，专注为用户提供免费的资源下载服务与个性化服务需求。">
		<script type="text/javascript"> 
		function doTTS(){
			var ttsDiv = document.getElementById('bdtts_div_id');
			var ttsAudio = document.getElementById('tts_autio_id');
			var ttsText = document.getElementById('ttsText').value;
			
			// 这样为什么替换不了播放内容
			/*var ssrcc = 'http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=10&text='+ttsText;
			document.getElementById('tts_source_id').src=ssrcc;*/
			
			// 这样就可实现播放内容的替换了
			ttsDiv.removeChild(ttsAudio);
			var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
			var sss = '<source id="tts_source_id" src="http://www.quanbaike.com/wp-content/uploads/auto_save_image/2019/06/054400MQV.jpg'+ttsText+'" type="audio/mpeg">';
			var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
			var au2 = '</audio>';
			ttsDiv.innerHTML = au1 + sss + eee + au2;
			
			ttsAudio = document.getElementById('tts_autio_id');
			
			ttsAudio.play();
		}
		</script>
	</head>
	<body>
		<div>
			<input type="text" id="ttsText">
			<input type="button" id="tts_btn" onclick="doTTS()" value="播放">
		</div>
		<div id="bdtts_div_id">
			<audio id="tts_autio_id" autoplay="autoplay">
				<source id="tts_source_id" src="http://www.quanbaike.com/wp-content/uploads/auto_save_image/2019/06/054400MQV.jpg全百科网播报内容" type="audio/mpeg">
				<embed id="tts_embed_id" height="0" width="0" src="">
			</audio>
		</div>
	</body>
</html>

3、在线测试

点击测试朗读（声音还是女的哦）

4、参考资料

网址：http://yuyin.baidu.com/docs/tts/44

网站添加朗读

接下来就讲下在wordpress程序中如何给文章内容加上TTS语音朗读功能。

其实这个功能很简单，而且代码也很少，你几乎直接粘贴在content前面就可以了，加载速度也是很快，几乎没影响。

复制以下代码加在single.php页面的任何你想插入的地方：（本段代码经过优化实现了过滤特殊字符串并保留顿号可保证内容通顺语音播放）

<?php
// 作者：全百科网提供
// 网站：http://www.quanbaike.com/
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'); ?>/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 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调整。

<span style="float: left;
margin-right: 10px;
cursor: pointer;">

播放按钮素材下载地址

http://www.quanbaike.com/news/2620.html

本段代码是全百科网目前所知的最简单方法与最精简的代码了，如果你有更好的方法或者更精简的代码表达欢迎在评论区留言。

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

wordpress

网站建设

http

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

wordpress

网站建设

http

登录后参与评论

0 条评论

热度