WordPress 主题文章内容加上TTS语音朗读功能

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

这里我们一般是使用的是百度提供的TTS(Text To Speech)文本到语音功能。

如下是实现这个基本功能的插件实现的代码。如下:

<?php

/**
 * @package SpeakIt
 */
/*
Plugin Name: Speak It
Description: Plugin for Speak
Version: 1.0
Author: longsky
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');
?>

给TA买糖
共{{data.count}}人
人已赞赏
wordpress

WordPress 主题知更鸟Begin添加说说&微语单页

2020-4-20 10:36:36

wordpress

WordPress 主题纯代码生成 Sitemap.xml 地图

2020-4-21 13:32:14

⚠️
Golurending上的部份代码及教程来源于互联网,仅供网友学习交流,未经Golurending作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 邮箱codesns#163.com(#-@) 或 点击右侧 私信:管理员 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索