首页 > Web开发 > 详细

HTML5音乐播放器

时间:2016-08-30 19:40:20      阅读:163      评论:0      收藏:0      [点我收藏+]
 <!--音乐播放器-->
        <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>

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

HTML5音乐播放器

原文:http://www.cnblogs.com/zsl123/p/5823197.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!