冀教网 - 河北教师网站 - 专注于冀教版课本资源

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 28|回复: 0

VUE实战--网易云音乐

[复制链接]

4万

主题

4万

帖子

12万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
124999
发表于 2020-5-23 22:47 | 显示全部楼层 |阅读模式
VUE实战--网易云音乐

知识点:


  • 音乐的暂停播放。
  • 歌词的动态匹配。
动态组件:

根据is 属性 后面的组件名匹配
[code][/code]背景模糊:

可以利用伪类选择器, 来给背景来一层, rgba(0,0,0,0.5)模糊
audio标签:


  • audio 没有controls 属性 不在页面中显示
  • 通过下面的两个方法可以播放&暂停 音乐![image-20200523214532329](/Users/jackson/Library/Application Support/typora-user-images/image-20200523214532329.png)
  • 点击子组件中的按钮实现音乐的播放与暂停, 实际是通过字父组件的传值,来调用方法 。子组件种样式的改变是通过css来实现的。
页面切换动画:

运用动态组件, 先让动态组件匹配过渡页面, 当过渡页面完成匹配真正的主页。
![image-20200523214903726](/Users/jackson/Library/Application Support/typora-user-images/image-20200523214903726.png)
上图就是监听页面的load事件,完成后就切换动态组件的匹配
封装FETCH

![image-20200523215521004](/Users/jackson/Library/Application Support/typora-user-images/image-20200523215521004.png)
动态绑定样式:

![image-20200523215549464](/Users/jackson/Library/Application Support/typora-user-images/image-20200523215549464.png)
歌词滚动的实现:

1. 把歌词数据 转化成数组可迭代的形式:

运用正则表达式来匹配到所有的 歌词, 以歌词中的事件。
![image-20200523215824808](/Users/jackson/Library/Application Support/typora-user-images/image-20200523215824808.png)
2.audio标签实例currentTime属性

可以通过下面的方式获取到歌曲播放的时间: (单位为s) 然后传递给子组件
![image-20200523220043346](/Users/jackson/Library/Application Support/typora-user-images/image-20200523220043346.png)
在播放时获取时间并且传递,在暂停时取消获取
![image-20200523220814694](/Users/jackson/Library/Application Support/typora-user-images/image-20200523220814694.png)
3.具体歌词索引的获取

对应哪一句歌词就是比播放到的时间小&&最接近的那个
![image-20200523221055762](/Users/jackson/Library/Application Support/typora-user-images/image-20200523221055762.png)
之后动态添加高亮的样式给相应的那个p标签
4.歌词区域的滚动

监听对应歌词的改变,随着改变进行歌词区域的向上平移就可以了
![image-20200523221312197](/Users/jackson/Library/Application Support/typora-user-images/image-20200523221312197.png)
上面通过js的方式获取到了每一个p标签的高度加上p上下两边的所占的长度, 即为每句歌词需要滚动的距离。
具体样式更精细的实现可以再精细一点!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|冀教网 - 河北教师网站 - 专注于冀教版课本资源  

GMT+8, 2020-6-3 23:13 , Processed in 1.327458 second(s), 29 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表