-
获取音乐、播放的实现(打开页面,自动获取歌曲,并自动播放),并显示歌曲的相关信息
-
暂停功能的实现
-
下一首功能的实现
-
剩余时间的实现
- 使用ontimeupdate来实现
-
当音乐播放结束之后,自动加载并播放下一首音乐
- Audio对象的ended事件
-
切换频道相当于一个简单的轮播
-
音量调整
-
进度条的实现
- 使用ontimeupdate来实现:当歌曲播放时,不断修改歌曲进度条的长度
-
点击进度条,跳转到指定的声音节点
- 获取进度条的位置坐标,主要是水平方向上的
- 获取进度条的长度
- 当鼠标点击的进度条的时候,获取鼠标点击时的位置坐标,主要也是水平方向的
- (鼠标点击水平位置坐标 - 进度条起点水平位置坐标)/进度条的长度 --> 歌曲播放时间占总时长的比例 --> 动态进度条的长度
-
歌词的实现
- 歌词是按照
\n
来划分的且每一段歌词是以时间开头的,所以可以以\n
将返回的歌词进行分割,存放在一个数组中 - 将歌词按照minute second存放在一个二维数组中:几分几秒,当时间改变时,可以直接在数组的对应位置找到此时的歌词(方便查找)
- 歌词是按照
-
喜欢的实现:结合本地存储来实现
- 点击心型按钮时,按钮变成红色,并且将当前歌曲的信息保存到本地
- 再次点击时,按钮变成灰色,并将当前歌曲的信息从本地删除
- 当channel切换到我喜欢的歌曲时,播放之前添加“喜欢”的歌曲
- 当点击下一首按钮时,进行判断(当前channel是否是我喜欢的音乐),如果是则从localStorage中获取下一首音乐
-
Notifications
You must be signed in to change notification settings - Fork 0
yan358941877/music-player
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
About
简单实用的音乐播放器
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published