前端实战——实现音乐播放页面

1,088 阅读4分钟

前言

今天不讲原理,今天实现了音乐播放页面

作为一个接触前端不到两个月的新手小白,在学习许多基础原理知识之后,决定自己来手磨一个音乐播放页面,毕竟纸上谈兵终觉浅,绝知此事要躬行!

实现效果

页面

页面主体呈现是这样的:

image.png

功能

实现的功能有这些:

  1. 设置歌曲自动播放
  2. 设置点击控制歌曲播放/暂停
  3. 实现歌曲播放时时间和进度条相应变化
  4. 实现进度条拖拽功能
  5. 实现上下切换歌曲和渲染页面
  6. 实现交叉播放功能
  7. 实现点亮爱心,并保存状态

实现代码

不知道怎么在码上掘金上添加图片和音频资源(自取的小伙伴自己找一下资源哦)

html结构

  1. 音乐播放容器(.musicPlay) :这是整个音乐播放页面的容器。

  2. 音乐容器(.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代码实现了一个简单的音乐播放功能,以下是其主要功能点的精简解释:

  1. 设置歌曲自动播放

    • 这部分代码在 iconMusic 函数中实现,通过判断音频是否暂停,来控制音频的播放和暂停状态。
  2. 点击控制歌曲播放/暂停

    • 也是在 iconMusic 函数中实现的,通过监听播放按钮(.play)的点击事件来切换播放状态。
  3. 歌曲播放时时间和进度条相应变化

    • 这部分功能在 change 函数中实现,通过监听音频的 timeupdate 事件,在音频播放时更新进度条和时间显示。
  4. 进度条拖拽功能

    • 也是在 change 函数中实现的,通过监听进度条容器(.proBar)的 mousedown 事件来实现拖拽功能,计算点击位置相对于总长度的比例,从而设置音频播放进度。
  5. 上下切换歌曲和渲染页面

    • 分别在 rtfw 函数中实现,根据当前歌曲的索引切换到上一首或下一首歌曲,并调用 render 函数渲染页面。
  6. 交叉播放功能

    • cros 函数中实现,监听交叉播放按钮的点击事件,根据状态切换播放模式为顺序播放或随机播放。
  7. 点亮爱心,并保存状态

    • 通过监听爱心图标的点击事件,在点击时切换喜爱状态并保存在相应的数据中,以实现爱心的点亮与取消点亮。

总结

小编写完觉得代码过于冗杂,整体不够优雅,暂时也还没有更完美的解决方式😱😱😱,果然还是掌握的知识和技巧太浅薄了,希望大佬们能提供更好的学习和修改建议!

image.png