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

本是古典何须时尚 2022-06-14 05:28 306阅读 0赞

## 消息提示音 ##

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

1.  第一步：当然我们要准备好jquery.js库文件了（[http://download.csdn.net/detail/qq\_33624284/9867133][http_download.csdn.net_detail_qq_33624284_9867133]）
2.  实际编码：

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

body中：

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

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

$(function(){
        
            $('<audio id="chatAudio"><source src="music/lieren.mp3" type="audio/mpeg"></audio>').appendTo('body');
            var circulation;
            //计时器
            $("#circulation").click(function(){
        
                circulation = setInterval("$('#chatAudio')[0].play()", 1000); 
                return true; 
            });
            //清除计时器
            $("#clear").click(function(){
        
                clearInterval(circulation);
            }); 
        });

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

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>提示音</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    </head>
    <script type="text/javascript"> 
        //点击播放
    //  $(function(){
         
    //      $('<audio id="chatAudio"><source src="music/123.mp3" type="audio/mpeg"></audio>').appendTo('body');
    //      $("#trig").click(function(){
         
    //          $('#chatAudio')[0].play();
    //      }); 
    //  });
        //循环播放
        $(function(){
         
            $('<audio id="chatAudio"><source src="music/lieren.mp3" type="audio/mpeg"></audio>').appendTo('body');
            var circulation;
            //计时器
            $("#circulation").click(function(){
         
                circulation = setInterval("$('#chatAudio')[0].play()", 1000); 
                return true; 
            });
            //清除计时器
            $("#clear").click(function(){
         
                clearInterval(circulation);
            }); 
        });
    </script> 
    </head> 
    <body> 
        <center>
            <input type="button" value=" 点击 " id="trig" /><br /><br />
            <input type="button" value=" 循环 " id="circulation" /><br /><br />
            <input type="button" value=" 停止 " id="clear" /><br /><br />
        </center>
    </body> 
    </html>

[http_download.csdn.net_detail_qq_33624284_9867133]: http://download.csdn.net/detail/qq_33624284/9867133