HTML5音乐播放器

Posted 2020-08-05 码天码地

 <!--音乐播放器-->
        <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>

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