关于网页消息提示音问题解决与实现

消息提示音

最近工作中需要实现网页消息提示声音的功能，所以自己就研究了下，参考了网络很多同僚的做法，各有千秋，不过都比较复杂，对初学者来说还是比较难以采用。
这里结合相关知识自己简单的记录下来：

第一步：当然我们要准备好jquery.js库文件了， 实际编码：

//jq实现
<script type="text/javascript"> 
    $(function(){
        $('').appendTo('body');//audio 表示音频，把这个内容添加到页面body中
        $("#trig").click(function(){
            $('#chatAudio')[0].play();//'#chatAudio'在这个区域里的第一个资源文件
        }); 
    });
</script> 

body中：

触发按钮即可实现声音了，下面拓展内容：

我们如果想实现循环播放呢？

$(function(){
        $('

').appendTo('body'); var circulation; //计时器 $("#circulation").click(function(){ circulation = setInterval("$('#chatAudio')[0].play()", 1000); return true; }); //清除计时器 $("#clear").click(function(){ clearInterval(circulation); }); });

下面把简单的完整代码贴出来：

<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript"> //点击播放 // $(function(){ // $('').appendTo('body'); // $("#trig").click(function(){ // $('#chatAudio')[0].play(); // }); // }); //循环播放 $(function(){ $('').appendTo('body'); var circulation; //计时器 $("#circulation").click(function(){ circulation = setInterval("$('#chatAudio')[0].play()", 1000); return true; }); //清除计时器 $("#clear").click(function(){ clearInterval(circulation); }); }); </script>