【从零到一】用HTML5+CSS+JavaScript实现一个属于自己的mp3免费音乐播放器 (1) UI结构与定义class

前言 ✍️

学了那么多前端的知识点，今天我们就不谈别的，就来实战一下做一个简易的音乐播放器~

当然这也是为了让大家可以完全掌握使用HTML5+CSS+JavaScript来开发一个音乐播放的过程与一会，同时我们也可以利用技术来摆脱第三方平台限制，自由实现个性化功能与无广告纯净享受音乐乐趣为目的~ 哈哈哈 废话不多说，我们开始吧~

UI界面与功能描述 👓

首先你要做一个什么样子的播放器，要先想好呀 ，不然无处下手代码，我们可以参考一下网上有很多这样的案例

这里就不过多赘述了，大家自行百度查就行了~

我这里就做成如下形式

如图

那么这个音乐播放器大致的功能包含:重听、上一曲、下一曲、暂停 / 播放、快退 5 秒、快进 5 秒、双倍快退 10 秒、双倍快进 10 秒 这些功能也算是一个音乐播放器基本的功能了~

HTML基本结构 👔

有了以上的UI布局样式效果图与功能描述，那HTML+CSS的结构与样式代码就好办了~

以下是播放器的基本HTML结构

代码

<!--播放器 元素容器-->
<div class="player">
    <!--标题-->
    <h2 class="player-title">CUSTOM MUSIC PLAYER</h2>
    <!--播放器描述-->
    <p class="player-subtitle">MUSIC HAS THE POWER TO SOOTHE AND CALM THE MIND</p>
    <!--当前播放的音乐名称-->
    <div class="music-info" id="musicName">当前音乐的名称</div>

    <!--播放器按钮-->
    <div class="btn-group">
        <!-- 重听按钮 -->
        <button class="player-btn reset-btn" id="resetBtn">↺</button>
        <!-- 上一曲 -->
        <button class="player-btn" id="prevTrack">◄◄</button>
        <!-- 停止 -->
        <button class="player-btn" id="stopBtn">■</button>
        <!-- 播放/暂停 -->
        <button class="player-btn play-pause" id="playPauseBtn">❚❚</button>
        <!-- 快退5秒 -->
        <button class="player-btn" id="backBtn">◄</button>
        <!-- 快进5秒 -->
        <button class="player-btn" id="nextBtn">►</button>
        <!-- 下一曲 -->
        <button class="player-btn" id="nextTrack">►►</button>
        <!-- 双倍快退(10秒) -->
        <button class="player-btn speed-btn" id="doubleBackBtn">◄×2</button>
        <!-- 双倍快进(10秒) -->
        <button class="player-btn speed-btn" id="doubleNextBtn">►×2</button>
    </div>

    <!--原始音频元素-->
    <audio id="audio" preload="auto"></audio>

这里我们定义了很多按钮和class类, 其中最多的就是button的样式类

一些特别的按钮，我们可以单独拿出来再定义样式就行了

如下

我们直接在Chrome浏览器中运行，看看是什么效果!

效果如下

其实从代码中，我们不难看出，这些HTML元素，也仅仅是元素而已，它们并没有播放音乐的功能~

我们也只是在模拟，播放器的UI界面而已，真正能播放音乐的是audio元素，这里大家一定要清楚!

另外这个效果，是基本上的纯HTML效果，当然接下来，我们要使用CSS来美化一下它!

不然看起来也太丑了~🥹