今天在wordpress交流群中看到有人问了一个问题：网页里面要加入一个读屏功能，就是语音读网页的内容，请问用什么插件？
其实文本阅读功能就是TTS（Text To Speech），即“从文本到语音”，是人机对话的一部分，让机器能够说话。
|
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文本朗读功能就弄好了。
需要美化和一些其他优化的，可用参考另外一种方法，这里提供演示地址：美化和代码屏蔽后的效果
本文来自郑永博客 ，本文观点不代表蓝洛水深立场，转载请联系原作者。
微信扫一扫 
支付宝扫一扫 
