网站添加TTS语音朗读
in Skill with Views 389

网站添加TTS语音朗读

in Skill with Views 390

恩,这个功能其实实用性并不是很高,但本着网站就是用来折腾的原则,博主还是给自己的网站添加上了TTS。此方法是直接调用的百度TTS的端口。默认是女生的读音,如需更换声音等,可自行研究。

其实这个功能还是蛮有趣的。哈哈,废话不说,直接放教程

此教程为博主在郑永博客发现的,在此要感谢大神的教程和指导。

tts.jpg

<?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来调整。

Responses
  1. Mark
    A罩

    大佬 生成海报是插件功能吗?看起来很不错的样子

    Chrome 72 美国 得克萨斯州
    1. Jdeal
      主人
      @Mark

      typecho没几个插件可以使用额,这个是自己做的额,GitHub上看到的代码自己一顿改额。

      Chrome 63 江苏省无锡市 电信