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