HTML5<audio>标签声音告警实例

最新推荐文章于 2025-06-04 20:00:00 发布

bsh_csn

最新推荐文章于 2025-06-04 20:00:00 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： html/css 文章标签： html5 audio

本文链接：https://blog.youkuaiyun.com/bsh_csn/article/details/52130824

html/css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何利用HTML5的<audio>标签实现监控告警的语音播放功能，通过在页面中嵌入mp3音频，并配合JavaScript进行控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5标签声音告警实例

本实例是为了将公司内监控的告警使用语音播放出来

在jsp页面定义事先录好的mp3音频, 代码如下:

<script type="text/javascript">
//  var k = 0;  
    var nodelist = new Array();
    conf={
    "0" : "jiqiren.mp3",
    "1" : "huankuai.mp3",
    "2" : "jieba.mp3"
}
</script>

js中代码如下:

                    var audioSrcList = new Array();

                    var audio = document.createElement("audio"); 
                    audio.loop = false;
                    audio.width="100px";
            //      audio.defaultPlaybackRate = 1;   //播控的缺省倍速 
                    audio.playbackRate = 0.5;        //播放的倍速
                    function audioFun(audioSrcList){
                //      for(var i=0; i<audioSrcList.length; i++){  //需要播放的MP3条数
                            audio.src = audioSrcList[0];
                            document.getElementById("soundAlert").appendChild(audio);
                            audio.play();  //播放第一条

                            audio.addEventListener('play', function(){  //添加监听, 当audio.play()方法执行时生效
                                setTimeout(function(){  //定时, 当语音播放3秒后暂停此语音, 可以在有限的时间内播放多条语音.
                                    audio.pause();
                            //      audio.ended = true;
                                }, 3000) 
                            }, false)
                            audio.addEventListener('pause', function(){ //添加监听, 当audio.pause()方法执行时生效
                                audio.src = audioSrcList[1];
                                audio.load();
                                audio.play();   
                                audioSrcList.shift();
                            }, false);  
            //          }
                    }
                    for(var k=0;k <3;k++){  //k可以是告警的长度
                        audioSrcList.push(conf[k]);  //将对应的MP3push进数组中
                    }
                    audioFun(audioSrcList);  //调用语音播放方法