网页插入背景音乐

admin

1. <style type="text/css">
   
2. .btnAudio{ width:36px; height:36px; position:absolute; right:30px; top:18px; overflow:hidden; background:url("http://open.storage.ailxcloud.com/o_1a8ql8dr2sjc1fap6161u3bj8ba.png") left top no-repeat; z-index:100;}
   
3. .rotate1circle{-webkit-animation:rotate1circle 1s linear infinite;}
   
4. @-webkit-keyframes rotate1circle {
   
5.         0% {
   
6.                 -webkit-transform-origin:center center;
   
7.                 -webkit-transform:rotate(0deg);
   
8.         }
   
9.         100% {
   
10.                 -webkit-transform-origin:center center;
    
11.                 -webkit-transform:rotate(360deg);
    
12.         }
    
13. }
    
14. </style>
    
15. 
    
16. <section class="u-audio hidden" data-src="http://网址.mp3"></section>
    
17. <div class="btnAudio" id="btnAudio"></div>
    
18. 
    
19. <script>
    
20. var bg_audio_val = true;
    
21. var bg_audio = new Audio();
    
22. function audio_init(){
    
23.         var options_audio = {
    
24.                 loop: true,
    
25.                 preload: "auto",
    
26.                 src: $('.u-audio').attr('data-src')
    
27.         }
    
28.         for (var key in options_audio) {
    
29.                 bg_audio[key] = options_audio[key];
    
30.         }
    
31.         bg_audio.load();
    
32.         audio_addEvent();
    
33.         bg_audio.play();
    
34. }
    
35. function audio_addEvent(){
    
36.         $("#btnAudio").on('click', audio_control);
    
37.         $(bg_audio).on('play',function(){
    
38.                 bg_audio_val = false;
    
39.                 $('#btnAudio').addClass('rotate1circle');
    
40.         })
    
41.         $(bg_audio).on('pause',function(){
    
42.                 $('#btnAudio').removeClass('rotate1circle');
    
43.         })
    
44. }
    
45. function audio_control(){
    
46.         if(!bg_audio_val){
    
47.                 bg_audio.pause();
    
48.                 bg_audio_val = true;
    
49.         }else{
    
50.                 bg_audio.play();
    
51.         }
    
52. }
    
53. audio_init();
    
54. </script>

复制代码