Web音乐播放

最新推荐文章于 2025-07-16 11:03:24 发布

梵涯

最新推荐文章于 2025-07-16 11:03:24 发布

阅读量5.3k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： java 文章标签：音乐播放器

本文链接：https://blog.youkuaiyun.com/weixin_42193004/article/details/97421499

Web音乐播放

最近做了个音乐播放的功能模块，只要给标签添加一个src读取项目里的音乐文件就能进行播放，如
loop:循环播放；
autoplay:打开页面自动播放；
controls=“controls” 向用户显示控件，比如播放按钮。
【1】简易的音乐播放

当然项目不可能做得那么简陋，我的目标是模仿网易云播放器

这是html5标签原生的样式有点丑，也不符合要求，只能自己去手写
在这里插入图片描述
【2】手写音乐播放样式

 <style type="text/css">
	.slider_box {
	 	position:absolute;
	    width: 100%;
	    background-color:#2e2e2e;
	    height: 80px;
	    box-shadow: 1px 1px 2px 2px #808080;
	    bottom:10px;
	    z-index: 10;
	 }
	 .slidearea {
	    position:absolute;
	    width: 800px;
	    left:340px;
	    top:50px;
	         
	  }
    .fa_controls{
      position:absolute;
      left:90px;
	  top:15px;
    }
    .fa_controls a{
     padding:10px 15px;
    }
   .fa_controls .fa{
    font-size: 30px;
    color: #fff;
 
    }
    #pauseone i,#playing i{
       font-size: 45px;
    }
    .fa_controls .fa:hover{
     text-shadow:0px 1px 2px  #fff;
     
    }
    .musicinfor{
      position:absolute;
	  left:370px;
	  top:20px;
	  color: #fff;
	  font-size: 15px;
    }
    .musicTime{
    position:absolute;
	  left:1180px;
      top: 55px;
      color: #fff;
    }
    .volumeControl{
     position:absolute;
	  left:1340px;
      top: 25px;
      
    }
     .volumeControl .fa{
    font-size: 27px;
    color: #fff;
     
    }
    .volumeSlide{
     position:absolute;
	  left:1380px;
      top: 35px;
    }
 .stateControl a{
    position:absolute;
	left:1290px;
    top: 25px;
    font-size: 27px;
    color: #fff;
 }

	.slidearea {
      -moz-transition: all 0s;
      -o-transition: all 0s;
      -webkit-transition: all 0s;
      transition: all 0s;
	 }
	   .dis_none{
	     display: none;
	   }  
	//滑块
     input[type=range]{ 
		 margin-top: 8px;
	     outline: none; 
		 -webkit-appearance: none;/*清除系统默认样式*/  
		 width:100% !important;  
		 background: -webkit-linear-gradient(#61bd12, #61bd12) no-repeat, #ddd;  
	     background-size: 30% 100%;/*设置左右宽度比例*/  
		height: 3px;/*横条的高度*/  
   } 
 /*拖动块的样式*/  
   input[type=r