VUE实战–网易云音乐
知识点:
- 音乐的暂停播放。
- 歌词的动态匹配。
动态组件:
根据is 属性 后面的组件名匹配
<component :is="组件的名字"></component>
背景模糊:
可以利用伪类选择器, 来给背景来一层, rgba(0,0,0,0.5)模糊
audio标签:
- audio 没有controls 属性 不在页面中显示
- 通过下面的两个方法可以播放&暂停 音乐[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3HmyjwFo-1590243441422)(/Users/jackson/Library/Application Support/typora-user-images/image-20200523214532329.png)]
- 点击子组件中的按钮实现音乐的播放与暂停, 实际是通过字父组件的传值,来调用方法 。子组件种样式的改变是通过css来实现的。
页面切换动画:
运用动态组件, 先让动态组件匹配过渡页面, 当过渡页面完成匹配真正的主页。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IgBD6j5T-1590243441424)(/Users/jackson/Library/Application Support/typora-user-images/image-20200523214903726.png)]
上图就是监听页面的load事件,完成后就切换动态组件的匹配
封装FETCH
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BATkw1wM-1590243441427)(/Users/jackson/Library/Application Support/typora-user-images/image-20200523215521004.png)]
动态绑定样式:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GCkrSl13-1590243441430)(/Users/jackson/Library/Application Support/typora-user-images/image-20200523215549464.png)]
歌词滚动的实现:
1. 把歌词数据 转化成数组可迭代的形式:
运用正则表达式来匹配到所有的 歌词, 以歌词中的事件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f3HVieZP-1590243441435)(/Users/jackson/Library/Application Support/typora-user-images/image-20200523215824808.png)]
2.audio标签实例currentTime属性
可以通过下面的方式获取到歌曲播放的时间: (单位为s) 然后传递给子组件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KNhopeKZ-1590243441437)(/Users/jackson/Library/Application Support/typora-user-images/image-20200523220043346.png)]
在播放时获取时间并且传递,在暂停时取消获取
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6GbTgWst-1590243441438)(/Users/jackson/Library/Application Support/typora-user-images/image-20200523220814694.png)]
3.具体歌词索引的获取
对应哪一句歌词就是比播放到的时间小&&最接近的那个
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HGjf6TYb-1590243441439)(/Users/jackson/Library/Application Support/typora-user-images/image-20200523221055762.png)]
之后动态添加高亮的样式给相应的那个p标签
4.歌词区域的滚动
监听对应歌词的改变,随着改变进行歌词区域的向上平移就可以了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EgDzXH5E-1590243441440)(/Users/jackson/Library/Application Support/typora-user-images/image-20200523221312197.png)]
上面通过js的方式获取到了每一个p标签的高度加上p上下两边的所占的长度, 即为每句歌词需要滚动的距离。
具体样式更精细的实现可以再精细一点!