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

时间：2022-06-12 15:41:14
<!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="" ></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>

相关文章