JavaScript制作音乐播放器。实现了进度条拖动。音量大小控制，上一首下一首的切换

最新推荐文章于 2024-02-12 20:30:00 发布

坚持坚持-未来可期$$

最新推荐文章于 2024-02-12 20:30:00 发布

阅读量4.7k

点赞数 10

本文链接：https://blog.csdn.net/weixin_46430385/article/details/105584449

版权

本文介绍了如何使用JavaScript配合HTML和CSS创建一个功能完善的音乐播放器。内容涵盖进度条控制、音量调节以及歌曲切换等功能的实现细节。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/music.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/icon.css">
</head>
<body>
<!--音乐播放器-->
<div class="musicPlayer">
    <!--歌曲信息-->
    <div class="musicInfo">
        <!--歌曲图片-->
        <div class="musicImg" id="musicImg">
            <img src="img/1.jpg" id="musicpic">
        </div>
        <!--歌曲图片 end-->
        <!--歌曲名称-->
        <div class="musicName">
            <h1 id="sname">歌曲名称</h1>
            <h2 id="singer">歌手</h2>
        </div>
        <!--歌曲名称 end-->
    </div>
    <!--歌曲信息 end-->

    <!--快捷文字-->
    <div class="kj">
        <ul>
        <li><img id="aiXin" src="img/aixin1.png"><p>喜欢</p></li>
        <li><img id="shouCang" src="img/shoucang.png"><p>收藏</p></li>
        <li><img id="xiaZai" src="img/xiazai.png"><p>下载</p></li>
        <li><img id="fenXiang" src="img/fenxiang.png"><p>分享</p></li>
        </ul>
    </div>

    <!--快捷文字 end-->

    <!--进度条-->
    <div class="jdt">
        <span class="jdt-left time" id="jdtLeft">00:00</span>
        <span class="jdt-right time" id="jdtRight">00:00</span>
        <div class="clears"></div>

        <div class="jdt_1" id="gequJDBar">
            <div class="jdt_color" id="gequjd">
            </div>
        </div>
        <!--进度条 end-->
        <!--控制按钮-->
        <div class="ctrls" id="ctrls">
            <button class="preBtn" id="preBtn" type="button"><img src="img/pre.png"></button>
            <button class="playBtn" id="playBtn" t