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