浏览一些博客的时候是否有看到过在内容上面有可以选择语音朗读功能,看着感觉还是蛮炫酷的。尤其是移动端的网站阅读体验比较好,比如一些内容教程、小说类型的网站可以使用这样的功能。
这里我们一般是使用的是百度提供的 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主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!