网页音乐播放器

最新推荐文章于 2022-07-07 11:52:01 发布

plds

最新推荐文章于 2022-07-07 11:52:01 发布

阅读量388

点赞数 1

分类专栏： html5 文章标签： html5 css

本文链接：https://blog.csdn.net/qq_25225441/article/details/78244064

版权

html5 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>music player</title>
  <link rel="stylesheet" type="text/css" href="style.css">

</head>
<style type="text/css">
#player{width: 356px;height: 135px;border:1px solid #272822;background-color:#2F2E2E;border-radius: 10px;box-shadow: 6px 7px 6px #1E1E1E;position: relative;top:10px;left:10px;opacity: 1;  }
#mywind{position: absolute;left: 2px;top:2px;width: 32px;height: 32px;}
.button{width: 135px;height: 40px;position: absolute;left: 0px;top:87px;border-radius: 10px;}
.button a img{border-radius: 40px;}
#prebtn{position: absolute;left: 10px;top:7px;}
#play{position: absolute;left: 46px;top:2px;}
.pause{position: absolute;left:55px;display: none; }
#next{position: absolute;left:90px;top:7px;}
.probar{position: absolute;right: 72px;bottom: 9px;width: 153px;height: 10px;background-color: #D5DCDE;}
.Smessage{font-family:"AlexBrush-Regular";font-size: 23px;font-weight: bold; position: absolute;left: 70px;top:20px;z-index: 200;color:#02103F;}
</style>
<script type="text/javascript">
      function overchapre(){
      document.getElementById("prebtn").src="img/pre_over.png";
      }
        function outchapre(){
        document.getElementById("prebtn").src="img/pre.png";
      }
      function overchaplay(){
      var audio=document.getElementById('Audio');  
       if(audio.paused) {  
           document.getElementById("playbtn").src = "img/play_over.png";  
       }else{  
           document.getElementById("playbtn").src = "img/stop_over.png";  
       }       
      }
      function outchaplay(){
      var audio=document.getElementById('Audio');  
       if(audio.paused) {  
           document.getElementById("playbtn").src = "img/play.png";  
       }else{  
           document.getElementById("playbtn").src = "img/stop_over.png";  
       }        
     }
      function overchaNext(){
      document.getElementById("nextbtn").src="img/next_over.png";
      }
      function outchaNext(){
      document.getElementById("nextbtn").src="img/next.png";
      }
   function musicplay() {  
       var audio=document.getElementById('Audio');  
       if(audio.paused){  
           audio.play();  
           document.getElementById("playbtn").src="img/stop.png";  
       }else{  
           audio.pause();  
           document.getElementById("playbtn").src="img/play.png";  
       }  
   }  

</script>
<body>
 <audio id="Audio" src="music/倉木麻衣 - Stay By My Side.mp3"></audio>
    <div><p class="Smessage">Stay By My Side</p></div>
    <div id="player">
       <div id="mywind"><img src="swen.png" alt=""></div>
     <div class="button">
         <a id="prebu" onMouseOver="overchapre()" onMouseOut="outchapre()" οnclick="preSg()">  
         <img id="prebtn" src="img/pre.png" alt="" title="previous" /></a> 

        <a id="play" onMouseOver="overchaplay()"" onMouseOut="outchaplay()" οnclick="musicplay()"><img id="playbtn" src="img/play.png" title="play" alt=""></a>

        <a id="next" onMouseOver="overchaNext()" onMouseOut="outchaNext()" οnclick="nexSg()"><img id="nextbtn" src="img/next.png" title="next" alt=""></a>


       </div>
     <div class="lyricdis"></div>  
     <div class="playimg">
       <img src="mai-k.png" alt="" style="height: 100px; width: 100px; position: absolute;right: 0px;top:0px;border-radius: 9px;" >

       </div>
     <!--<div class="probar"></div>-->

   </div>
</body>
</html>

plds

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
网页音乐播放器

music player #player{width: 356px;height: 135px;border:1px solid #272822;background-color:#2F2E2E;border-radius: 10px;box-shadow: 6px 7px 6px #1E1E1E;position: relative;top:10px;left:10px;opacit
复制链接

扫一扫