10.26日音乐播放器

考察内容:

1、定位浮动

2、css3的一些旋转的上拉下拉的动画

3、js对html以及css的一些dom操作

4、audio标签的一些属性以及js对audio的一些操作

5、audio标签外链的使用

已实现了的功能:

1、上一曲,下一曲的切换

2、显示作者、歌名以及歌词的显示

3、暂停及播放

4、歌曲默认单曲循环(audio标签的loop属性)

5、歌曲的自动播放(audio标签的autoplay属性)

6、ccs3的背景图旋转上拉下拉的动画效果

待实现的功能及解决办法:

1、歌曲的随机播放–>解决办法:定义一个随机数让歌曲数组下标等于这个随机数即可

2、歌曲的循环播放–>解决办法:定义一个计时器再获取到歌曲时间长度当计时器大于等于歌曲时间时歌曲数组下标加1

3、歌曲音量的调控–>解决办法:获取到input-range标签的值在使用volume调节音量(0-1)之间

http://sl31.gitee.io/sl_zuoyeku/musicplay/index.html

PS:第二首歌曲有歌词信息

10.26日音乐播放器

10.26日音乐播放器


逐梦版权所有丨如未注明 , 均为原创丨本网站采用 BY-NC-SA协议进行授权
转载请注明原文链接: 10.26日音乐播放器
喜欢 (0)

相关文章: