网站添加TTS语音朗读

TTS Typecho 教程

恩，这个功能其实实用性并不是很高，但本着网站就是用来折腾的原则，博主还是给自己的网站添加上了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