HTML5音乐播放器

- JavaScript - 262 阅 Hot


 

<!--音乐播放器-->
       <div style="position:absolute; top:10px; right:10px; z-index:10000;">
           <audio  preload="load" id="mmm" src="{:CUSTOM_TEMPLATE_PATH}Index/ColorV5/bg.mp3"></audio>
           <img style="width:35px;height:35px;" src="{:CUSTOM_TEMPLATE_PATH}Index/ColorV5/images/music.png" id="img" class="image" onclick="timeout ? stopAnim() : startAnim()"  />
       </div>
       
   <script type="text/javascript">        
       var timeout, rotate = 0;        
       function startAnim() {            
          var Media = document.getElementById("mmm");
          timeout = setInterval(function () {              
               var img = document.getElementById("img");                
               var rotateStyle = "rotate(" + rotate + "deg)";
               img.style.transform = rotateStyle;
               img.style["-moz-transform"] = rotateStyle;
               img.style["-webkit-transform"] = rotateStyle;
               img.style["-o-transform"] = rotateStyle;
               img.style["-ms-transform"] = rotateStyle;

               rotate += 6;                
               if (rotate > 360) {
                   rotate = 0;
               }
           }, 30);
           Media.play();
       }  
            
       function stopAnim() {
           clearInterval(timeout);
           timeout = null;            var Media = document.getElementById("mmm");
           Media.pause();
       }
       
       startAnim();    
 </script>

可以实现点击旋转图片播放和暂停背景音乐。


0 +1

文章来源 " zsl 整理 "

原文地址 " http://www.zsl123.cn/index/info/index/id/29.html "