html+js+css+mysql实现音乐播放器

最新推荐文章于 2023-10-22 23:24:21 发布

weixin_43827398

最新推荐文章于 2023-10-22 23:24:21 发布

阅读量1.8k

点赞数 3

分类专栏： web前端文章标签： css javascript html css3

本文链接：https://blog.csdn.net/weixin_43827398/article/details/108310719

版权

本文介绍了如何使用HTML构建界面，CSS进行美化，JavaScript处理音乐播放和控制，通过data.js读取音乐路径，并在项目中实现音乐播放、自动切歌、进度条控制、切换歌曲、循环播放及随机播放等功能。涉及到的技术包括CSS3、JavaScript和简单的数据交互。

摘要由CSDN通过智能技术生成

实现原理

使用html写出界面，css装饰，js实现音乐播放和控制，音乐从data.js中读取相对路径，在js中使用player播放存在项目中的音乐。

主界面（index）

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/reset.css">
        <link href="css/index.css" rel="stylesheet">
    </head>
    <body>
        <!-- 顶部logo和搜索 -->
        <div class="top">
            <div class="container">
                <div class="logo">
                    <h1>
                        <a href=""></a>
                    </h1>
                </div>
                <div class="search">
                    <i class="icono-search"></i>
                    <input type="text" placeholder="输入查询关键字">
                </div>
            </div>
        </div>
        
        <div class="play-main">
            <div class="container main-wrap">
                <!-- 左侧功能栏 -->
                <div class="left-side">
                    <ul class="side-menu">
                        <li><a href="" class="active"><i class="icon-font icon-recommend"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;今日推荐</a></li>
                        <li><a href=""><i class="icon-font icon-rank"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;排行榜</a></li>
                        <li><a href=""><i class="icon-font icon-playing"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正在播放</a></li>
                        <li><a href=""><i class="icon-font icon-history"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;播放历史</a></li>
                        <li><a href=""><i class="icon-font icon-fav"></i>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我的收藏</a></li>
                    </ul>
                </div>
                <!-- 歌曲列表 -->
                <div class="list">
                    <table>
                        <!-- 列表头 -->
                        <thead>
                        <tr class="tb-head">
                            <th class="tb-space"></th>
                            <th>歌曲</th>
                            <th>演唱者</th>
                            <th>专辑</th>
                            <th>大小</th>
                            <th class="tb-space"></th>
                        </tr>
                        </thead>
                        <!-- 列表项 -->
                        <tbody id="tbody">       </tbody>
                    </table>
                </div>



                <!-- 歌曲信息 -->
                <div class="right-side">
                    <!-- 专辑封面 -->
                    <div class="album-cover">
                        <a href="">
                            <img src="imgs/校长 - 带你去旅行.jpg" alt="专辑封面">
                        </a>
                    </div>
                    <!-- 歌词 -->
                    <div class="album-lrc">
                        <ul>
                            <li class="lrc-line">带你去旅行 - 校长</li>
                            <li class="lrc-line">作词：朱贺</li>
                            <li class="lrc-line">作曲：朱贺</li>
                            <li class="lrc-line">编曲：王柏鸿</li>
                            <li class="lrc-line">今天妆令人特别着迷</li>
                            <li class="lrc-line">Oh 我说 baby</li>
                            <li class="lrc-line">出门前换上新的心情</li>
                            <li class="lrc-line">Oh 我的 lady</li>
                            <li class="lrc-line">你喜欢有小情绪</li>
                            <li class="lrc-line">像晴天的乌云</li>
                            <li class="lrc-line">头发长见识短的惊奇</li>
                            <li class="lrc-line">表情丰富令人着迷</li>
                            <li class="lrc-line">你的一切我都好奇像秘密</li>
                            <li class="lrc-line">安全带系好带你去旅行</li>
                            <li class="lrc-line">穿过风和雨</li>
                            <li class="lrc-line">我想要带你去浪漫的土耳其</li>
                            <li class="lrc-line">然后一起去东京和巴黎</li>
                            <li class="lrc-line">其实我特别喜欢迈阿密</li>
                            <li class="lrc-line">和有黑人的洛杉矶</li>
                            <li class="lrc-line">其实亲爱的你不必太过惊奇</li>
                            <li class="lrc-line">一起去繁华的上海和北京</li>
                            <li class="lrc-line">还有云南的大理保留着回忆</li>
                            <li class="lrc-line">这样才有意义</li>
                            <li class="lrc-line">今天妆令人特别着迷</li>
                            <li class="lrc-line">Oh 我说 baby</li>