HTML5標籤聲音告警實例

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);  //調用語音播放方法