编写一个网页版的音频播放器，AI 加持，So easy!

背景

本机下载了一些蒋勋老师的音频，包括《蒋勋讲红楼梦》，《中国文学》，《细说庄子》......苦于没有一个汇总这些音频的地方。之前尝试加载到网易云播放列表，但是混杂了网易云音乐后，列表就乱了。想过做一个 uTools 工具的，感觉有点难度，就作罢。想到用 html 实现的话，应该比较容易。

本文记录使用 DeepSeek 平台秘塔AI平台编写一个音频播放器的全过程。总的来说，DeepSeek 给出的源码 99% 是可用的，但是还有 1% 的明显错误。

小试牛刀，需求描述

输入需要实现的功能：「用html5实现一个音频播放器，一个音频列表可以选择播放的内容，一个上一个、下一个按钮，一个播放键，一个进度条键」。得到答案如下：

要实现一个包含音频列表、上一个、下一个按钮、播放键和进度条的HTML5音频播放器，我们可以结合我搜索到的资料中的信息来构建一个完整的解决方案。

以下是一个详细的实现步骤：HTML结构首先，我们需要定义HTML结构，包括音频元素、控制按钮、进度条和播放列表。拷贝出来后得到一个简单的播放器页面：

正片开始，优化描述

输入更完整的描述如下：

生成一个音乐播放器，用 html5生成，包含两个菜单 1、蒋勋讲红楼梦，从目录A下读取所有的音频文件。 2、蒋勋讲中国文学，从目录B下读取所有的音频文件。 3、背景颜色用淡蓝色。 4、音频文件列表用分页显示，每页显示5条。 5、包含上一首、下一首、播放、进度条。

秘塔AI给出了第一版代码，并做了如下解释：拷贝出这个完整的 html 内容、修改文件的 file 路径后，通过浏览器访问。

这次的页面漂亮多了：

优化页面结构

这次生成的 html 文件是一个比较长的 html 文件，继续输入：「将播放文件变量定义在单独的js文件中」，得到回答如下：

我将把代码重构为模块化结构，将音频文件数据分离到单独的JavaScript文件中。以下是完整的实现方案：

优化后的 html 页面比较清晰了：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蒋勋文学讲座播放器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="player-container">
        <h1>蒋勋文学讲座</h1>
        
        <div class="menu-tabs">
          <div class="menu-tab active" data-menu="hongloumeng">蒋勋讲红楼梦</div>
          <div class="menu-tab" data-menu="chinese-literature">蒋勋讲中国文学</div>
       </div>

       <div class="track-list-container">
          <ul class="track-list" id="trackList"></ul>
          <div class="pagination" id="pagination"></div>
       </div>

       <div class="now-playing" id="nowPlaying">未选择任何曲目</div>

       <div class="player-controls">
          <button class="control-btn" id="prevBtn">⏮</button>
          <button class="control-btn" id="playBtn">▶</button>
          <button class="control-btn" id="nextBtn">⏭</button>
       </div>

       <div class="progress-container">
          <div class="progress-bar" id="progressBar">
             <div class="progress" id="progress"></div>
          </div>
          <div class="time-display">
             <span id="currentTime">00:</span>
             <span id="duration">00:</span>
          </div>
       </div>

       <audio id="audioPlayer"></audio>
   </div>

   <!-- JavaScript文件 -->
   <!-- trackData.js必须在player.js之前加载 -->
   <script src="./js/trackData.js"></script>  
   <script src="./js/player.js"></script>  
</body>
</html>

创建一个 js 目录，并创建引用到的 trackData.js 和 player.js 和 css 文件后，发现 css 文件和 player.js 有一些低级的错误，修正后，得到一个结构清晰的网页。

优化分页页码

《细说红楼》总文件数160个，导致分页页码不合理，继续追问：「分页页面显示的时候，页数过多时只显示五个，中间用省略号」。

优化分页渲染方法后：

总结

DeeepSeek 给出的代码基本可用，给出了两个菜单的 demo 后，自己追加了三个菜单，然后调整样式：

第一个菜单距离左侧100px，居中更漂亮一点。
文本显示居中。
添加一个 favicon.ico 文件。

最终完整的 html 文件如下：

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蒋勋文学音频播放器</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="shortcut icon "  type="images/x-icon" href="favicon.ico">
</head>
<body>
<div class="player-container">
    <h1>蒋勋讲中国文学音频</h1>

    <div class="menu-tabs">
        <div style="margin-left:100px;" class="menu-tab active" data-menu="redHouse">细说红楼</div>
        <div class="menu-tab" data-menu="oldWild">细说庄子</div>
        <div class="menu-tab" data-menu="chineseLiterature">中国文学</div>
        <div class="menu-tab" data-menu="springFlowerAndNight">春江花月夜</div>
        <div class="menu-tab" data-menu="baiJuYi">白居易</div>
        <div class="menu-tab" data-menu="duFu">杜甫</div>
        <div class="menu-tab" data-menu="liBai">李白</div>
    </div>

    <div class="track-list-container">
        <ul class="track-list" id="trackList"></ul>
        <div class="pagination" id="pagination"></div>
    </div>

    <div class="now-playing" id="nowPlaying">未选择任何曲目</div>

    <div class="player-controls">
        <button class="control-btn" id="prevBtn">⏮</button>
        <button class="control-btn" id="playBtn">▶</button>
        <button class="control-btn" id="nextBtn">⏭</button>
    </div>

    <div class="progress-container">
        <div class="progress-bar" id="progressBar">
            <div class="progress" id="progress"></div>
        </div>
        <div class="time-display">
            <span id="currentTime">00:</span>
            <span id="duration">00:</span>
        </div>
    </div>

    <audio id="audioPlayer"></audio>
</div>

<!-- JavaScript文件 -->
<!-- trackData.js必须在player.js之前加载 -->
<script src="./js/tangPoem.js"></script>
<script src="./js/readHouse.js"></script>
<script src="./js/literature.js"></script>
<script src="./js/trackData.js"></script>
<script src="./js/player.js"></script>
</body>
</html>

整理文件目录：最终应用界面为：

加上图标后，还是很漂亮的！