WordPress文章内容加上百度TTS语音朗读

浏览一些博客的时候是否有看到过在内容上面有可以选择语音朗读功能,看着感觉还是蛮炫酷的。尤其是移动端的网站阅读体验比较好,比如一些内容教程、小说类型的网站可以使用这样的功能。

这里我们一般是使用的是百度提供的 TTS(Text To Speech)文本到语音功能。如下是实现这个基本功能的插件实现的代码。如下:

  1. <?php
  2. /**
  3.  * @package SpeakIt
  4.  */
  5. /*
  6. Plugin Name: Speak It
  7. Plugin URI: https://www.mobibrw.com/speakit
  8. Description: Plugin for Speak
  9. Version: 1.0
  10. Author: longsky
  11. Author URI: https://www.mobibrw.com
  12. License: GPLv2 or later
  13. Text Domain: SpeakIt
  14. */
  15. ?>
  16. <?php
  17.   function mbStrSplit ($string, $len = 1) { //对内容进行分割
  18.     $start = 0;
  19.     $strlen = mb_strlen($string);
  20.     while ($strlen) {
  21.       $array[] = mb_substr($string, $start, $len, "utf8");
  22.       $string = mb_substr($string, $len, $strlen, "utf8");
  23.       $strlen = mb_strlen($string);
  24.     }
  25.     return $array;
  26.   }
  27. 
    
  28.   function match_chinese($chars, $encoding = 'utf8') { //过滤特殊字符串
  29.     $pattern = ($encoding == 'utf8')?'/[x{4e00}-x{9fa5}a-zA-Z0-9,,。 ]/u':'/[x80-xFF]/';
  30.     preg_match_all($pattern, $chars, $result);
  31.     $temp = join('', $result[0]);
  32.     return $temp;
  33.   }
  34. 
    
  35.   function load_template_HTML($tts_uri, $ctx) {
  36.     $template_html = '<video id="speakit_video" style="display:none">
  37.         <source id="speakit_src" type="video/mp4">
  38.       </video>
  39.       <script type="text/javascript">
  40.         var speakitOff = 0;
  41.         var speakitUri = "'.$tts_uri.'";
  42.         var speakitCtx = eval('.$ctx.');
  43.         var speakitAud = document.getElementById("speakit_video");
  44.         if (speakitCtx.length > 0) {
  45.           speakitAud.src = speakitUri + speakitCtx[speakitOff];
  46.         }
  47.         function playSpeakItContent() {
  48.           var speakitAudBtn = document.getElementById("speakit_btn");
  49.           if (speakitAud.paused && speakitCtx.length > 0) {
  50.             speakitAudBtn.src = "'.plugins_url('images/pause.png', __FILE__).'"; //暂停图片
  51.             speakitAud.src = speakitUri + speakitCtx[speakitOff];
  52.             speakitAud.onended = function() {
  53.               speakitOff = speakitOff + 1;
  54.               if (speakitOff < speakitCtx.length) { 
  55.                speakitAud.src = speakitUri + speakitCtx[speakitOff];
  56.                speakitAud.play();
  57.               } else {
  58.                 if (!speakitAud.paused) {
  59.                   speakitAud.pause();
  60.                 }
  61.                 speakitOff = 0;
  62.                 speakitAudBtn.src = "'.plugins_url('images/play.png', __FILE__).'"; //暂停图片
  63.               }
  64. 			};
  65. 			speakitAud.play();
  66.           } else {
  67.             if (!speakitAud.paused) {
  68.               speakitAud.pause();
  69.             }
  70.             speakitAudBtn.src = "'.plugins_url('images/play.png', __FILE__).'"; //播放图片
  71.           }
  72.         }
  73.       </script>
  74.       <span style="float: left; margin-right: 10px; cursor: pointer;">
  75.         <a href="javascript:playSpeakItContent();"><img src="'.plugins_url('images/play.png', __FILE__).'" width="25" height="25" id="speakit_btn" border="0"></a>
  76.       </span>';
  77. 
    
  78.     return $template_html;
  79.   }
  80. 
    
  81.   function load_speak_html($content) {
  82.     $str = $content;
  83.     $str = strip_tags($str);
  84.     $str = str_replace("、", ",", $str); //保留顿号
  85.     $str = match_chinese($str);
  86.     $ctx_len = mb_strlen(preg_replace('/s/', '', html_entity_decode(strip_tags($str))), 'UTF-8');
  87.     $r = mbStrSplit($str, 900);
  88.     $tts_uri = "https://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=";
  89.     return load_template_html($tts_uri, json_encode($r));
  90.   }
  91. 
    
  92.   function speakit_main($content) {
  93.     if(is_single()||is_feed()) {
  94.       $html = load_speak_html($content);
  95.       $content = $html.$content;
  96.     }
  97.     return $content;
  98.   }
  99. 
    
  100.   add_filter ('the_content', 'speakit_main');
  101. ?>

这里我们将代码添加到 wordpress 的 plugins 目录下的 SpeakIt 目录下。

里面有两个按钮 play.png,pause.png,需要存放到 SpeakIt 插件的 images 目录下:
WordPress文章内容加上百度TTS语音朗读-云模板WordPress文章内容加上百度TTS语音朗读-云模板

原创文章,作者:DavidWu,如若转载,请注明出处:https://www.davidwu.net/archives/76641

WordPress安全防护插件
服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

电子邮件地址不会被公开。 必填项已用*标注

51建站客服微信二维码
点击这里购买