前言
今天不讲原理,今天实现了音乐播放页面
作为一个接触前端不到两个月的新手小白,在学习许多基础原理知识之后,决定自己来手磨一个音乐播放页面,毕竟纸上谈兵终觉浅,绝知此事要躬行!
实现效果
页面
页面主体呈现是这样的:
功能
实现的功能有这些:
- 设置歌曲自动播放
- 设置点击控制歌曲播放/暂停
- 实现歌曲播放时时间和进度条相应变化
- 实现进度条拖拽功能
- 实现上下切换歌曲和渲染页面
- 实现交叉播放功能
- 实现点亮爱心,并保存状态
实现代码
不知道怎么在码上掘金上添加图片和音频资源(自取的小伙伴自己找一下资源哦)
html结构
-
音乐播放容器(.musicPlay) :这是整个音乐播放页面的容器。
-
音乐容器(.music) :
-
data-id属性:用于存储当前播放歌曲的ID。
-
头部(.head) :
- 背景(.bg) :显示当前播放歌曲的背景图片。
- 标题(.title) :显示页面的标题内容,“正在播放”。
-
内容区域(.bd) :
-
音乐封面(.image) :显示当前播放歌曲的封面图片。
-
歌曲名称(.musicName) :显示当前播放歌曲的名称。
-
歌手名称(.singer) :显示当前播放歌曲的歌手名称。
-
进度条(.proBar) :
- 左侧进度条(.left-bar) :表示已播放部分。
- 右侧进度条(.right-bar) :表示剩余部分。
-
时间(.time) :
- 左侧时间(.left-time) :显示已播放的时间。
- 右侧时间(.right-time) :显示歌曲总时长。
-
控制按钮(.control) :
- 交叉播放按钮(.cross) :用于切换交叉播放模式。
- 上一首按钮(.retreat) :用于播放上一首歌曲。
- 播放/暂停按钮(.play) :用于控制歌曲的播放和暂停。
- 下一首按钮(.forward) :用于播放下一首歌曲。
- 喜爱按钮(.heart) :用于标记歌曲为喜爱或取消喜爱状态。
-
音效信息(.sub) :
- 左侧音效(.left-sub) :显示HIFI音效。
- 右侧音效(.right-sub) :显示DTS音效。
-
-
css
主要使用了 Flex 布局,还包括相对和绝对定位。在 CSS 中,使用了 display: flex;
属性将容器设置为 Flex 容器,从而启用了弹性布局。弹性布局允许子元素在容器内按照灵活的排列方式进行布局,使得页面能够更好地适应不同的屏幕尺寸和内容。
js
JavaScript代码实现了一个简单的音乐播放功能,以下是其主要功能点的精简解释:
-
设置歌曲自动播放:
- 这部分代码在
iconMusic
函数中实现,通过判断音频是否暂停,来控制音频的播放和暂停状态。
- 这部分代码在
-
点击控制歌曲播放/暂停:
- 也是在
iconMusic
函数中实现的,通过监听播放按钮(.play
)的点击事件来切换播放状态。
- 也是在
-
歌曲播放时时间和进度条相应变化:
- 这部分功能在
change
函数中实现,通过监听音频的timeupdate
事件,在音频播放时更新进度条和时间显示。
- 这部分功能在
-
进度条拖拽功能:
- 也是在
change
函数中实现的,通过监听进度条容器(.proBar
)的 mousedown 事件来实现拖拽功能,计算点击位置相对于总长度的比例,从而设置音频播放进度。
- 也是在
-
上下切换歌曲和渲染页面:
- 分别在
rt
和fw
函数中实现,根据当前歌曲的索引切换到上一首或下一首歌曲,并调用render
函数渲染页面。
- 分别在
-
交叉播放功能:
- 在
cros
函数中实现,监听交叉播放按钮的点击事件,根据状态切换播放模式为顺序播放或随机播放。
- 在
-
点亮爱心,并保存状态:
- 通过监听爱心图标的点击事件,在点击时切换喜爱状态并保存在相应的数据中,以实现爱心的点亮与取消点亮。
总结
小编写完觉得代码过于冗杂,整体不够优雅,暂时也还没有更完美的解决方式😱😱😱,果然还是掌握的知识和技巧太浅薄了,希望大佬们能提供更好的学习和修改建议!