码迷,mamicode.com
首页 > Web开发 > 详细

关于一个简易的Html5音乐播放器的制作

时间:2020-06-25 16:07:21      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:func   border   展示   code   lan   element   size   img   order   

效果:
技术图片

<!Doctype html>
<html>
      <head>
            <meta charset="utf-8">
            <title>MUSIC</title>
            <style type="text/css">
                  *{margin:0px;padding:0px;}
                  #bg{position:absolute;top:0px;left:0px;background:url("./img/bg_1.jpg");background-size:cover;height:100%;width:100%;overflow:hidden;}
                  #music_icon{position:fixed;top:10px;right:10px;background:url("./img/music_icon.png");background-size:cover;height:55px;width:55px;}
                  #music_board{height:500px;width:400px;background:#999;margin:10% auto;border-radius:12px;box-shadow:0px 0px 15px #222;display:none;}
                  #music_gif{height:280px;width:380px;position:relative;top:20px;left:10px;background:url("./img/music_5.gif");background-size:cover;}
                  #music_control{text-align: center;position: relative;top: 50px;color: rgb(255, 255, 255);font-size: 1.5em;}
                  #control{margin-top:45px;width:100%;height:70px;text-align:center;}
            </style>
      </head>
      <body>
            <audio id="music" src="./mp3/xinxiangan.mp3" loop="loop"></audio>
            <div id="bg">
                  <div id="music_icon" onclick="show_music_board()"></div>
                  <div id="music_board">
                        <div id="music_gif"></div>
                        <div id="music_control">MUSIC BOARD
                              <div id="control">
                                    <img  id="control_img" src="./img/pause_button.png" height="60px" onclick="music_control()">
                              </div>
                        </div>
                  </div>
            </div>

            <script type="text/javascript">
            var music = document.getElementById("music");//建立audiod对象
            var control_img = document.getElementById("control_img");//建立播放按钮图片对象,为了更好的操作
            var music_board = document.getElementById("music_board");//建立music面板的对象,为了更好的操作
            var lock = false;//设置一个布尔变量,用于判断音乐的播放与暂停

            function music_control(){//音乐开始与暂停
                  if( lock == false){
                        music.play();
                        control_img.setAttribute("src", "./img/pause_button.png");
                        lock = true;
                  }
                  else{
                        music.pause();
                        control_img.setAttribute("src", "./img/play_button.png");
                        lock = false;
                  }
                  
            }

            function show_music_board(){//music面板的显现与展示
                  if( music_board.style.display == "none"){music_board.style.display = "block";
                        lock = false;
                        music_control();
                  }
                  else{
                        music_board.style.display ="none";
                        lock = true;
                        music_control();
                  }
            }
            </script>
      </body>
</html>

注意要点:1)object.setAttribute();

关于一个简易的Html5音乐播放器的制作

标签:func   border   展示   code   lan   element   size   img   order   

原文地址:https://www.cnblogs.com/wykxldz/p/13191802.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!