使用按钮控制HTML5背景音乐开关 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>演示：使用按钮控制HTML5背景音乐开关</title>



</head>

<body>
    
    <div id="main">

        <div style="width:36px; height:36px;float:right;position:absolute;z-index:13;top:5px;right:5px;">
        <audio id="music" src="../addons/shd_xb/template/style/mp3/back.mp3"  loop="loop">你的浏览器不支持audio标签。</audio>
        <a id="audio_btn"><img src="../addons/shd_xb/template/style/image/play.png"   id="music_btn" border="0" ></a>
   </div>
    </div>
    <script type="text/javascript"
        src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $("#audio_btn").click(function() {
            var music = document.getElementById("music");
            if (music.paused) {
                music.play();
                $("#music_btn").attr("src", "play.gif");
            } else {
                music.pause();
                $("#music_btn").attr("src", "pause.gif");
            }
        });

        function playPause() {
            var music = document.getElementById('music2');
            var music_btn = document.getElementById('music_btn2');
            if (music.paused) {
                music.play();
                music_btn.src = 'play.gif';
            } else {
                music.pause();
                music_btn.src = 'pause.gif';
            }
        }
    </script>
    
</body>
</html>

 

posted @ 2016-03-21 11:52  风琴~云淡  阅读(1632)  评论(0)  编辑  收藏  举报