html5实现百度语音播报功能

_成熟员

已于 2024-09-25 18:40:33 修改

阅读量4.1k

点赞数 4

分类专栏：记录案例 html5实现语音播报功能文章标签：语音识别百度 html5

于 2021-07-12 14:33:12 首次发布

本文链接：https://blog.csdn.net/weixin_53444764/article/details/118673684

版权

记录案例同时被 2 个专栏收录

1 篇文章

订阅专栏

html5实现语音播报功能

1 篇文章

订阅专栏

记录一下，html5调用百度语音接口实现语音播报功能，简单的完整案例（老案例）
由于百度接口的统一管理该代码url已经失效，url参数增加百度账号token等个人获取信息

老案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>百度语音播报</title>
</head>
<body>
    <div>
        <button onclick="VoiceAnnouncements('好雨知时节，当春乃发生。随风潜入夜，润物细无声。野径云俱黑，江船火独明。晓看红湿处，花重锦官城。')">点我播放</button>
        <button id="stop">点我暂停</button>
        <button id="come">暂停后可以点我继续刚才的播放</button>
    </div>
    <script src="/Content/jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $("#stop").click(function () {
                tape.pause();//暂停当前音频
            });
            $("#come").click(function () {
                tape.play();//继续播放当前音频
            });
        });
        
        var tape = null;//声明一个参数方便可以对当前播放的语音进行暂停，继续播放等操作。
        function VoiceAnnouncements(text) {
            if (tape != null) {//防止用户多次点击播放语音播放重复，如果当前语音正在播放则再点击播放时会先判断然后暂停当前播放的音频重新播放
                if (!tape.paused) {
                    tape.pause();
                }
            }
            
            var url = "http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=" + encodeURI(text);        // baidu文字转语音
            var audio = new Audio(url);
            tape = audio;
            audio.src = url;
            
             //Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 报这个错的时候可以加click 
            //audio.click();
            audio.play();//播放音频
        };

    </script>
</body>
</html>