Web音乐播放

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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值