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

最新推荐文章于 2023-04-20 10:00:00 发布

weixin_30751947

最新推荐文章于 2023-04-20 10:00:00 发布

阅读量666

点赞数

文章标签：开发工具 javascript ViewUI

原文链接：http://www.cnblogs.com/LoveQin/p/5301262.html

版权

<!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>

转载于:https://www.cnblogs.com/LoveQin/p/5301262.html

weixin_30751947

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用按钮控制HTML5背景音乐开关

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

扫一扫