百度云文字转语音功能的实现，并实现自动播放

最新推荐文章于 2023-11-10 14:32:07 发布

Hferje

最新推荐文章于 2023-11-10 14:32:07 发布

阅读量3.5k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/Hferje/article/details/97795446

版权

javascript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>语音</title>
</head>
<body>
<div>
    <input type="text" id="ttsText" value="">
    <input type="button" id="tts_btn" onclick="doTTS()" value="播放">
</div>
<div id="bdtts_div_id">
    <audio id="tts_autio_id" autoplay="autoplay">
        <source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&amp;ie=UTF-8&amp;spd=5&amp;per=1&amp;text=" type="audio/mpeg">
        <embed id="tts_embed_id" height="0" width="0" src="">
    </audio>
</div>

<script>

    function doTTS() {
        var ttsDiv = document.getElementById('bdtts_div_id');
        var ttsAudio = document.getElementById('tts_autio_id');
        var a=3;
        if(a==1){
            document.getElementById("ttsText").value = "富思源G2栋9楼发生报警，平台已启动三级响应：电话通知值班室、和维保人员，请消防控制室值班人员迅速赶往报警点查看现场情况。平台已启动三级响应：电话通知值班室、和维保人员，请消防控制室值班人员迅速赶往报警点查看现场情况。";
        }else if(a == 2){
            document.getElementById("ttsText").value = "XXX（地址）现在发生火警警情：设备XXX（设备名）报警，自动喷水灭火系统启动，平台已启动二级响应：电话通知值班室、维保人员、消防主管、物业经理，请消防控制室值班人员及物业义务消防员携带灭火器及其它灭火工具迅速赶往现场灭火救援。";
        }else{
            document.getElementById("ttsText").value = "响应一级报警";
        }
        var ttsText = document.getElementById('ttsText').value;//内容

        // 文字转语音
        ttsDiv.removeChild(ttsAudio);
        var au1 = '<audio id="tts_autio_id" autoplay="autoplay">';
        var sss = '<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&per=3&spd=5&text=' + ttsText + '" type="audio/mpeg">';
        var eee = '<embed id="tts_embed_id" height="0" width="0" src="">';
        var au2 = '</audio>';
        ttsDiv.innerHTML = au1 + sss + eee + au2;
        // ttsAudio = document.getElementById('tts_autio_id');
        // ttsAudio.play();
    }
    setTimeout(function() {
        // IE
        if(document) {
            document.getElementById("tts_btn").click();
        }
        // 其它浏览器
        else {
            var e = document.createEvent("MouseEvents");
            e.initEvent("click", true, true);
            document.getElementById("tts_btn").dispatchEvent(e);
        }
    }, 2000);





</script>

</body>
</html>

追加：谷歌浏览器设置一下就可以自动播放了

目前最新的Chrome Android版本已经是62.X。而Chrome Android等一些浏览器默认限制了自动播放音频视频等，需要用户有点击的动作后才可以播放。这样的原因在于很多用户流量需要付费，而限制了自动播放可以避免用户在不知情的情况下产生高额的流量费用。

在60.X版本之前，chrome://flags中有一个disable-gesture-requirement-for-media-playback的选项，让用户在浏览器中输入chrome://flags/#disable-gesture-requirement-for-media-playback将该选项应用后即可。

而从60.X版本开始，这个选项被移除了，取而代之的是一个名为Autoplay policy的选项。我们在浏览器中输入chrome://flags/#autoplay-policy，然后在高亮的选项中，将Default换成No user gesture is required： ---------------------

Hferje

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
百度云文字转语音功能的实现，并实现自动播放

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max...
复制链接

扫一扫