用JavaScript在网页编写一个播放器

最新推荐文章于 2025-06-23 15:28:44 发布

原创

最新推荐文章于 2025-06-23 15:28:44 发布 · 885 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html5

本文介绍了如何使用JavaScript、HTML和CSS在网页上构建一个播放器。内容包括播放器的结构布局，如标题、歌曲列表和播放控制，以及利用JSON加载歌曲信息。还详细讲解了JavaScript代码中的播放、暂停切换、歌曲进度控制以及事件监听等功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天是教师节，我先祝各位老师节日快乐！！！

今天我和大家分享用JavaScript在网页编写一个播放器。

对于播放器，大家都不陌生，那么要怎么样才能实现它呢？

下面是我做的一个播放器的图

首先我们从上向下看看这个播放器，它的最上面是标题（head）：我的音乐；中间是内容（body）:歌曲；最下面（foot）:控制音乐播放的控件。标题部分就只有标题：我的音乐，而中间内容部分是歌单，每个歌曲都有一个播放图标（音乐播放时才有）和歌曲的信息，底部部分有一些控制播放的图标、当前播放歌曲名、歌曲播放进度还有歌曲播放时长。

布局这块我们要保存结构与样式分离，结构用HTML写，样式用CSS写。

网页结构布局：我的歌曲不是直接写上去的，是加载json对象的。所以这里我写的内容部分的歌曲只是一个格式。上一首/播放、暂停/下一首的图标，我是用a标签写的，图标加在a标签背景上。歌曲播放的进度这块我是用两个div实现的，里面的一个div显示灰色当作总进度，上面的一个div显示白色当作当前歌曲播放进度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/yinyue.css">
</head>
<body>
<!--整个播放器部分-->
<div class="music-list">
    <!--标题部分-->
    <div class="head">我的音乐</div>
    <!--内容部分-->
    <div class="body" id="tbody">
        <!--每一首歌曲的格式-->
        <div class="item">
            <!--歌曲播放时的小图标-->
            <div class="item-logo box11"><img src="imgs/playing.gif"></div>
            <!--歌曲信息-->
            <div class="item-name">手掌心——丁当</div>
        </div>
    </div>
    <!--底部部分-->
    <div class="foot">
        <!--上一首/播放、暂停/下一首的图标-->
        <div class="box1">
            <!--上一首的图标-->
            <a href="javascript:;" class="btn-pre"></a>
            <!--播放、暂停的图标-->
            <a href="javascript:;" class="btn-play" id="btnPlay"></a>
            <!--下一首的图标-->
            <a href="javascript:;" class="btn-next"></a>
        </div>
        <!--歌曲播放的当前时间-->
        <div class="box2 play-current">0.00</div>
        <!--歌曲播放的进度和歌曲名-->
        <div class="box3 mid">
            <!--歌曲名-->
            <span id="playingNmae" class="m-name">我的音乐</span>
            <!--歌曲播放的进度-->
            <div class="box31"></div>
            <div class="box32"><a href="" class="dot"></a></div>
        </div>
        <!--歌曲播放的总时间-->
        <div class="box4 play-duration">4.13</div>
    </div>
</div>
<script s