恩,这个功能其实实用性并不是很高,但本着网站就是用来折腾的原则,博主还是给自己的网站添加上了TTS。此方法是直接调用的百度TTS的端口。默认是女生的读音,如需更换声音等,可自行研究。
其实这个功能还是蛮有趣的。哈哈,废话不说,直接放教程。
此教程为博主在郑永博客发现的,在此要感谢大神的教程和指导。
<?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;
}
$str=$post->post_content;
$str = strip_tags($str);
$str = str_replace("、",",",$str); //保留顿号
$str = match_chinese($str);
$zishu = mb_strlen(preg_replace('/\s/','',html_entity_decode(strip_tags($str))),'UTF-8');
$r = mbStrSplit($str, 900);
$qian = "http://tts.baidu.com/text2audio?cuid=baiduid&lan=zh&ctp=1&pdt=311&tex=";
?>
<?php if ($zishu <= 2700): ?>
<video id="langdu" style="display:none" webkit-playsinline="true" playsinline="true">
<source id="source" src="<?php echo $qian.$r[0]; ?>" type="video/mp4">
</video>
<script type="text/javascript">
function playPause() {
var music = document.getElementById('langdu');
var music_btn = document.getElementById('music_btn01');
if (music.paused) {
music.play();
music_btn.src = '您的播放图片地址';
var aud = document.getElementById("langdu");
aud.onended = function() {
aud.src = "<?php echo $qian.$r[1]; ?>"
aud.play();
aud.addEventListener("ended", function() {
aud.src = "<?php echo $qian.$r[2]; ?>"
aud.play();
aud.addEventListener("ended", function() {
aud.pause();
}, false);
}, false);
};
} else {
music.pause();
music_btn.src = '您的暂停图片地址';
}}
</script>
<span style="float:left;margin-right:10px;cursor: pointer;">
<a href="javascript:playPause();"><img src="您的播放图片地址" width="25" height="25" id="music_btn01" border="0"></a>
</span>
<?php endif; ?>
将上述代码插入文章页post模板合适位置,并设置好您的播放图片及暂停图片地址。
注意下,如网站开启了代码压缩,可能会出现点击无法播放的现象。
同时博主发现在ios系统下,点击后会弹窗全屏播放音频,在video标签内添加webkit-playsinline="true" playsinline="true"属性即可。
如发现播放图标位置或大小有问题,可通过设置其css来调整。
本文由 Jdeal 创作,采用 知识共享署名4.0 国际许可协议进行许可。
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名。
最后编辑时间为: 2019-08-29 18:41
大佬 生成海报是插件功能吗?看起来很不错的样子
亲,海报功能我已经把教程写出来了,如果有需要可以看下。
typecho没几个插件可以使用额,这个是自己做的额,GitHub上看到的代码自己一顿改额。