2018-03-09 云音乐5

2018-03-11  本文已影响0人  tsl1127

转光碟


image.png

黑胶边缘是浅色的白边


image.png
在加一个图片,起反光作用
再加一个封面

再加一个播放按钮(用SVG做)
还有一个播放探针

div分3部分


image.png
image.png

探针相对于container是绝对定位的


image.png

这些位置最好不要用像素来写,因为一旦变宽了,像素就不对了,vw是以页面的宽度来固定

如何把背景图片变模糊


image.png

这里的这个filter:blur(5px),是高斯模糊,问题是会对所有的进行模糊,包括“你好”
如果只想模糊背景
方法:把要模糊的部分放到伪类里


image.png

背景模糊了,字不会模糊


image.png
这里的封面是一个链接(存在别个地方),也可以再做一个拖拽匡,拖拽图片,存到七牛里,给出一个图片保存外链放这里

song-list里增加一个封面cover
让歌曲播放的背景动态变成歌曲的cover
还有一个是转盘的背景动态变成歌曲的cover

接下来做播放功能,把mp3给render进来


image.png
image.png
image.png

问题:歌曲播放完后,还在转动
搜 audio play end
有事件,ended


image.png

mdn里搜,代码写在这里没有用,因为,ended不会冒泡,即不会结束了不会通知他爸爸
那么只能在view里做


image.png
image.png
用了MVC就要遵循MVC的规则

接下来做歌词
先把歌词保存到管理页面
然后刷新打印出来


image.png
image.png

让每一行弄一个p标签


image.png
image.png
image.png

接下里播放歌词


image.png

transformY滚动歌词
类似轮播
不要时间轴
用正则
把字符串变成了数组


image.png

接下来把播放时间和歌词对应上


image.png
image.png

怎么找?
上一个p的时间比我早,下一个p的时间比我大,那这个就是展示的中间值

先把时间格式统一
可以用正则,也可以用split


image.png

转换时间、计算时间、显示时间


image.png
image.png
问题:最后一行是没有i+1的
加个判断
image.png

滚动显示:p元素距离顶部的高度


image.png
我想知道这个歌词距离div的高度
用截图里的高度减去外面div的高度即可
image.png
这个思路不行,歌词会上下跳动,换思路
image.png
上一篇 下一篇

猜你喜欢

热点阅读