WordPress教程

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 语音朗读

已有 471 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!