共计 3973 个字符，预计需要花费 10 分钟才能阅读完成。
今天在 wordpress 交流群中看到有人问了一个问题：网页里面要加入一个读屏功能，就是语音读网页的内容，请问用什么插件？
其实文本阅读功能就是 TTS（Text To Speech），即“从文本到语音”，是人机对话的一部分，让机器能够说话。
PHP
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<?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; ?>
|
将以上代码添加到当前所用主题目录下的 single.php 文件中，通常添加到
|
1
|
<div class=“content”>
|
后面，找一个合适的位置放，根据你主题的实际情况来。
代码中用到的图片下载这两个，放在主题目录下的 images 目录下
下载压缩包格式的点这里：images.zip
至此，简单的 wordpress 文本朗读功能就弄好了。
需要美化和一些其他优化的，可用参考另外一种方法，这里提供演示地址：美化和代码屏蔽后的效果
本文来自 郑永博客 ，本文观点不代表蓝洛水深立场，转载请联系
正文完
