HTML播放语音

1.采用有道的接口

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>语音播报</title>
    </head>
    <body>
        <button onclick='voiceBroadcast("微信收款10000000元")'>点击播放</button>
        <button onclick='voiceBroadcast("DTCTS订单号：Order1234567到货，请及时处理！")'>点击播放2</button>
        <script>
        
            function voiceBroadcast(text) {
                new Audio("https://dict.youdao.com/dictvoice?audio="+text+"&le=zh").play();
                //new Audio("https://fanyi.baidu.com/gettts?lan=zh&text="+text+"&spd=5&source=web").play();
            }
            
            /**
             * js默认播报
             * @param {Object} text
             */
            function voiceBroadcast2(text) {
                var utterThis = new SpeechSynthesisUtterance();
                utterThis.volume = 1; // 声音的音量 范围是0到1
                utterThis.lang = 'zh';// 汉语
                utterThis.rate = 0.7; // 语速，数值，默认值是1，范围是0.1到10
                utterThis.pitch = 2; // 音高，数值，范围从0（最小）到2（最大）。默认值为1
                utterThis.text = text;
                speechSynthesis.speak(utterThis);
            }
            
        </script>
    </body>
</html>

2.采用系统的

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
        .center-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>
</head>
<body>
<div class="center-container">
    <button onclick="showInputPrompt()">点我后，在弹窗输入文字，然后确认就可以播放了</button>
</div>
<script src="https://cdn.whwsh.cn/js/notification.js"></script>
<script>
    function showInputPrompt() {
        var inputText = prompt("请输入要播放的文字消息", "");
        if (inputText !== null) {
            if (inputText.trim() === "") {
                alert("输入不能为空，请重新输入");
            } else {
                notification.audio.setPlayText(inputText);
                notification.audio.play();
            }
        }
    }
</script>
</body>
</html>

 

参阅：

https://cloud.tencent.com/developer/article/2390634

https://blog.csdn.net/weixin_43992507/article/details/131830917

 

posted @ 2024-11-05 21:44  蜗牛的礼物  阅读(3)  评论(0)  编辑  收藏  举报