10.26日音乐播放器

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:第二首歌曲有歌词信息

:grin:


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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

患孤

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值