WEB版音乐播放器

R-READING

已于 2023-04-18 16:18:05 修改

阅读量2.1k

点赞数 1

文章标签：前端 vue.js

于 2022-09-27 16:22:22 首次发布

本文链接：https://blog.csdn.net/qq_52157198/article/details/126328762

版权

这个项目主要用到的是vue2 + axios + vue-router + vuex + elementUI
所有的数据均来源于网易云API，部分API由于使用问题做了一些替换。

重点模块

主页面框架（包括header和audio播放组件）
首页推荐

这一部分的主要功能是：轮播图、三个列表（推荐歌单、推荐歌手和热播歌曲）
歌单显示

显示歌单的封面图片和各个歌曲（以列表的形式呈现），每个列表都可以播放
歌曲播放

歌曲播放负责的组件是audioPlayer,组件内部实质上是一个audio标签，其余组件如果触发了play事件就会将歌曲信息传递给audioPlayer组件。其中，play事件是作为自定义事件绑定在audio组件上。
歌词滚动显示
该部分借鉴了博客，写的很清晰详细，侵权会删除。

通过API获得的歌词数据返回的是一大段字符串，其中的歌词有很多行，所以先利用正则表达式把每一行的歌词获取并保存在数组中。

每一行的数据实际上包括：[事件] 歌词，利用正则表达式把二者分开，变成obj对象的两个属性time和lyric，将obj放入最后确定好的歌词数组。

其中，time属性在滚动时需要和歌曲播放的事件进行对比，所以两者的形式要相同，则要对time属性进行格式转换。

歌词滚动：实际上就是歌曲播放时间和歌词time属性的匹配。歌曲播放的实时时间用的是自定义事件getCurrentTime绑定在歌词组件上，让audioPlayer组件在audio的事件@timeupdate发生时触发，把实时时间通过时间传递给歌词组件，成为currentTime属性。
歌词组件监视currentTime属性，如果 currentTime 与歌词时间不一致，更新data里面的 lyricIndex ，同时控制外层 ul 标签滚动。

组件间通信方法：

这个项目中使用的组件间通信方法主要是自定义事件

组件间通信方法种类：
- 父->子：props
- 子->父：自定义事件
- 兄弟组件间：子-》父-》子，自定义事件，vuex
  VUEX：集中式存储管理数据的，vue.js专用的，状态管理模式
  - vuex的state中保存的是多个组件共享的数据，mutations负责修改state中的变量（不能写异步），actions专门负责异步请求发送，从服务端获取数据，
  - mapActions:可以将vuex中的actions方法放在组件相应的位置，变成一个method。参数是一个数组形式
    具体请自行学习，这对于组件间通信非常重要。
axios函数封装：
在一个请求很多的项目中，不应当直接使用axios请求，会显得页面十分杂乱；而应该将axios请求封装为函数保存在另外的js文件中，通过模块暴露和模块引入的方式进行使用。
同时，可以设置baseURL，发送ajax请求是直接将baseURL和需要改变的部分进行拼接就可以了。
关于dataset:
以data-为前缀就被称为data属性，比如data-index ;我们可以通过dataset来获取data属性.
```
//<div data-id="test">test</div>
//获取id属性可以这么写：
let ele = document.querySelector('div')
let id = ele.dataset.id
```
这是一个很小的点，但是可以用于图片懒加载，即一开始不给img写src属性，只写data-src属性，这样浏览器就不会自动处理这个图片属性，到需要触发时，就把data-src赋给src。
关于audio标签：

常用属性： src,autoplay,loop,muted,controller
常用事件： ended,timeupdate,waiting
关于ref:
ref可以理解为id之类的，用于获取dom元素，但是又会比传统的dom元素获取方法减少消耗。
当组件中的一个标签有ref属性，如
```
<div ref="reftest"></div>
```
这个属性就会被放到这个组件的$refs对象中，引用时可以这么写：
```
//这里的this指的是该组件对象
let div=this.$refs.reftest
```

路由管理：
使用vue做SPA页面必然会用到路由管理（vue-router）
首先需要安装vue-router，在index.js文件中引入vue-router并作为插件（use）使用，构建一个router，将router暴露并引入到vue实例中。

//router文件
import VueRouter from 'vue-router'			// 引入VueRouter
//对于各个路由项所需要的组件都需要引入
import musicRecommend from "..."
import userMusic from "..."

const router = new VueRouter({
	routes:[
		{
			path:'/recommend',
			name:'recommend',
			component:musicRecommend
		},
		{
			path:'/userMusic',
			name:'userMusic',
			component:userMusic,
			//路由守卫
			beforeEnter(to,from,next){ 
				var myCookie=document.cookie;
				var flag=false;
				//根据浏览器中的cookie判断是不是登陆了，cookie需要进行格式处理
				myCookie=myCookie.split(";")
				for ( var i = 0; i < myCookie.length; i++) {
						var arr = myCookie[i].split("=");
						if (arr[0] == ' MUSIC_U'){
							flag=true;
						}
					}
					//路由通过了
				if(flag) next()
				else{
				//路由没有通过
					alert('请先登录！')
				}
					
			}
		}
	]
})