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

PetitQ WordPress教程 2020-9-23 2.29K 0 0

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

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

也想出现在这里？联系我们吧

```
<?php
```
```
/**
```
```
 * @package SpeakIt
```
```
 */
```
```
/*
```
```
Plugin Name: Speak It
```

Plugin URI: https://www.mobibrw.com/speakit

```
Description: Plugin for Speak
```
```
Version: 1.0
```
```
Author: longsky
```
```
Author URI: https://www.mobibrw.com
```
```
License: GPLv2 or later
```
```
Text Domain: SpeakIt
```
```
*/
```
```
?>
```
```
<?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;
```
```
  }
```
```
 
```

  function load_template_html($tts_uri, $ctx) {

    $template_html = '<video id="speakit_video" style="display:none">

        <source id="speakit_src" type="video/mp4">

```
      </video>
```
```
      <script type="text/javascript">
```
```
        var speakitOff = 0;
```

        var speakitUri = "'.$tts_uri.'";

        var speakitCtx = eval('.$ctx.');

        var speakitAud = document.getElementById("speakit_video");

```
        if (speakitCtx.length > 0) {
```

          speakitAud.src = speakitUri + speakitCtx[speakitOff];

```
        }
```
```
        function playSpeakItContent() {
```

          var speakitAudBtn = document.getElementById("speakit_btn");

          if (speakitAud.paused && speakitCtx.length > 0) {

            speakitAudBtn.src = "'.plugins_url('images/pause.png', __FILE__).'"; //暂停图片

            speakitAud.src = speakitUri + speakitCtx[speakitOff];

            speakitAud.onended = function() {

              speakitOff = speakitOff + 1;

              if (speakitOff < speakitCtx.length) {

               speakitAud.src = speakitUri + speakitCtx[speakitOff];

```
               speakitAud.play();
```
```
              } else {
```

                if (!speakitAud.paused) {

```
                  speakitAud.pause();
```
```
                }
```
```
                speakitOff = 0;
```

                speakitAudBtn.src = "'.plugins_url('images/play.png', __FILE__).'"; //暂停图片

```
              }
```
```
			};
```
```
			speakitAud.play();
```
```
          } else {
```
```
            if (!speakitAud.paused) {
```
```
              speakitAud.pause();
```
```
            }
```

            speakitAudBtn.src = "'.plugins_url('images/play.png', __FILE__).'"; //播放图片

```
          }
```
```
        }
```
```
      </script>
```

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

        <a href="javascript:playSpeakItContent();"><img src="'.plugins_url('images/play.png', __FILE__).'" width="25" height="25" id="speakit_btn" border="0"></a>

```
      </span>';
```
```
 
```
```
    return $template_html;
```
```
  }
```
```
 
```
```
  function load_speak_html($content) {
```
```
    $str = $content;
```
```
    $str = strip_tags($str);
```

    $str = str_replace("、", "，", $str); //保留顿号

```
    $str = match_chinese($str);
```

    $ctx_len = mb_strlen(preg_replace('/\s/', '', html_entity_decode(strip_tags($str))), 'UTF-8');

```
    $r = mbStrSplit($str, 900);
```

    $tts_uri = "https://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=";

    return load_template_html($tts_uri, json_encode($r));

```
  }
```
```
 
```
```
  function speakit_main($content) {
```
```
    if(is_single()||is_feed()) {
```

      $html = load_speak_html($content);

```
      $content = $html.$content;
```
```
    }
```
```
    return $content;
```
```
  }
```
```
 
```

  add_filter ('the_content', 'speakit_main');

```
?>
```

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

里面有两个按钮 play.png,pause.png,需要存放到 SpeakIt 插件的 images 目录下：

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

已有 573 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

WordPress教程

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

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

相关文章

WordPress 怎么禁止评论时存储用户IP地址

WordPress去除img标签height/width高度宽度让图片自适应

WordPress 企业网站产品无缝滚动展示功能制作方法

发表回复取消回复

热销模板

WordPress教程

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复