原生JavaScript+H5实现简单的音乐播放器

刚学了HTML5 的video和audio标签,自己写了一个简单的音乐播放器

可以实现的功能:

1、循环播放

2、下一首和上一首的切换

3、双击音乐播放

由于音乐格式都比较大就不上传了,可以找自己喜欢的音乐改一下

html部分代码


       
       
       
       

               
  • WeBelieve.mp3

  •            
  • 卷珠帘.mp3

  •            
  • 我的楼兰.mp3

  •        

   

css部分代码

.wrap{
    width: 300px;
    margin: 50px auto 0;
}
button{font-size: 25px;}
#btnNext{float: right;}
#mlist{width: 300px;background: #ccc;border: 1px solid #666;border-radius: 10px;overflow: hidden;margin-top: 10px;}
#mlist li{font-size: 24px;color: blue;line-height: 40px;border-bottom: 1px solid #666;padding-left: 5px;}
#mlist li:last-child{border-bottom: none;}
#mlist li:hover{color: red;}
#mlist .play{background: pink;}

JavaScript部分代码


你可能感兴趣的:(JavaScript)