使用现成的 DedeCMS 插件（最简单，推荐）
这是最省时省力的方法，有现成的开发者已经制作好了插件，你只需要下载、安装、配置即可。
（图片来源网络，侵删）
推荐插件：DedeCMS 音乐播放器插件
你可以在 DedeCMS 的官方论坛、插件市场或一些知名的 DedeCMS 资源网站上搜索找到这类插件。
基本使用流程：
- 下载插件：从可靠的来源下载插件包（通常是一个 ZIP 文件）。
- 上传文件：将插件包内的文件通过 FTP 上传到你网站的
dede/（后台目录）或include/等指定目录。 - 安装插件：登录你的 DedeCMS 后台，在“模块” -> “上传新模块”或“模块管理”中找到上传的插件文件进行安装。
- 调用播放器：安装成功后，插件通常会在后台提供一个调用代码，格式类似
{dede:player typeid='栏目ID' /}或[music id='文章ID'],你只需要在需要显示播放器的文章或页面中插入这个标签即可。
优点：
（图片来源网络，侵删）
- 无需修改核心代码,安全性高。
- 通常有后台管理界面,方便管理音乐文件和播放列表。
- 功能相对完善,支持列表播放等。
缺点：
- 需要寻找并信任第三方插件。
- 可能与你的 DedeCMS 版本不兼容。
使用 HTML5 的 <audio> 标签（最灵活，推荐开发者）
这是现代、标准且最灵活的方法，你可以在文章内容中直接插入一段 HTML 代码,让浏览器原生支持播放。
操作步骤：
- 准备 MP3 文件：将你的 MP3 文件上传到网站服务器的某个目录，
/uploads/music/。 - 在编辑器中插入代码：
- 登录 DedeCMS 后台，进入“所有文档”或“添加文档”。
- 切换到 “HTML 源码” 模式（非常重要！否则代码会被过滤）。
- 插入以下代码，并修改
src属性为你自己的 MP3 文件路径。
代码示例：
（图片来源网络，侵删）
<!-- 基础播放器，只显示一个控件 -->
<audio src="/uploads/music/your-song.mp3" controls>
您的浏览器不支持 audio 标签。
</audio>
<!-- 自定义样式的播放器 -->
<style>
.my-audio-player {
width: 100%;
max-width: 400px;
margin: 20px auto;
padding: 15px;
border-radius: 8px;
background-color: #f0f0f0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.my-audio-player audio {
width: 100%;
}
</style>
<div class="my-audio-player">
<h3>正在播放：我的音乐</h3>
<audio src="/uploads/music/your-song.mp3" controls>
您的浏览器不支持 audio 标签。
</audio>
</div>
代码解释：
<audio>：HTML5 的音频标签。src="/uploads/music/your-song.mp3"：必须修改为你的 MP3 文件的绝对路径。controls：这个属性告诉浏览器显示标准的播放控件（播放/暂停、进度条、音量等）。您的浏览器不支持 audio 标签。：这是在不支持 HTML5 的旧浏览器中显示的提示文本。
优点：
- 无需任何插件,代码简洁。
- 所有现代浏览器都支持。
- 可以通过 CSS 自定义播放器的外观。
- 性能好,加载速度快。
缺点：
- 需要手动为每首歌曲编写代码。
- 如果想做成播放列表，需要结合 JavaScript。
结合 JavaScript 制作播放列表（功能强大）
如果你想在页面上展示一个音乐列表，点击即可播放，那么就需要一些 JavaScript 来实现。
操作步骤：
- 准备 MP3 文件：同上,上传到服务器。
- 创建模板文件：在 DedeCMS 的模板目录（如
/templets/default/）下创建一个新的模板文件，music_list.htm。 - 编写模板代码：将以下代码复制到
music_list.htm文件中。
代码示例 (music_list.htm)：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">音乐播放列表</title>
<style>
body { font-family: Arial, sans-serif; background-color: #f4f4f4; }
.music-player-container {
width: 500px;
margin: 50px auto;
padding: 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.music-list {
list-style: none;
padding: 0;
}
.music-list li {
padding: 10px;
border-bottom: 1px solid #eee;
cursor: pointer;
transition: background-color 0.3s;
}
.music-list li:hover {
background-color: #f0f0f0;
}
.music-list li.active {
background-color: #e0e0e0;
font-weight: bold;
}
#audio-player {
width: 100%;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="music-player-container">
<h2>我的音乐列表</h2>
<ul class="music-list">
<!-- 这里使用 DedeCMS 的循环标签来动态生成列表 -->
{dede:arclist typeid='栏目ID' row='10'}
<li data-src="[field:litpic/]" data-title="[field:title/]">
[field:title/]
</li>
{/dede:arclist}
</ul>
<audio id="audio-player" controls></audio>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const audioPlayer = document.getElementById('audio-player');
const musicList = document.querySelector('.music-list');
const listItems = musicList.querySelectorAll('li');
// 为列表中的每一项添加点击事件
listItems.forEach(item => {
item.addEventListener('click', function() {
// 移除所有 active 类
listItems.forEach(i => i.classList.remove('active'));
// 给当前点击项添加 active 类
this.classList.add('active');
// 获取当前项的 data-src 和 data-title 属性
const musicSrc = this.getAttribute('data-src');
const musicTitle = this.getAttribute('data-title');
// 设置音频源
// 注意：这里假设文章的缩略图路径就是MP3路径，你需要根据实际情况调整。
// 更好的方法是在后台自定义一个字段来存储MP3地址。
// data-src="[field:mp3url/]"
if(musicSrc.endsWith('.mp3') || musicSrc.includes('mp3')){
audioPlayer.src = musicSrc;
}else{
// 如果缩略图不是MP3，你需要一个自定义字段，比如叫 mp3url
// audioPlayer.src = this.getAttribute('data-mp3url');
// 你需要修改上面的 arclist 标签为 data-mp3url="[field:mp3url/]"
alert('请在文章中使用自定义字段（如mp3url）来存放MP3地址！');
return;
}
// 播放音乐
audioPlayer.play();
});
});
});
</script>
</body>
</html>
使用说明：
- 创建栏目：在 DedeCMS 后台创建一个“音乐”或“歌曲”栏目,并设置好栏目模板。
- 修改代码：
- 将
{dede:arctype typeid='栏目ID' row='10'}中的栏目ID替换为你创建的音乐栏目的 ID。 - 关键一步：上面的代码假设你把 MP3 文件的地址放在了文章的
litpic（缩略图）字段里，这只是为了演示。强烈建议你添加一个自定义字段，比如命名为mp3url，专门用来存放 MP3 文件的地址，然后修改arclist标签为：<li data-src="[field:mp3url/]" data-title="[field:title/]"> [field:title/] </li>
- 将
- 生成页面：创建一篇新文章，在自定义字段
mp3url中填入你的 MP3 文件路径（如/uploads/music/song1.mp3）,然后生成这个栏目对应的页面。
优点：
- 功能非常强大,可以实现专业的音乐列表播放效果。
- 动态生成,易于管理。
- 用户体验好。
缺点：
- 需要一定的 HTML、CSS 和 JavaScript 基础。
- 需要修改模板文件,对新手有一定门槛。
总结与建议
| 方法 | 难度 | 灵活性 | 推荐人群 |
|---|---|---|---|
| 插件 | ★☆☆☆☆ | ★★☆☆☆ | 新手、不想写代码的用户 |
| HTML5 | ★★☆☆☆ | ★★★★☆ | 大多数开发者、普通站长 |
| JS列表 | ★★★☆☆ | ★★★★★ | 需要高级功能、有前端基础的开发者 |
对于绝大多数用户，我推荐从 方法二（HTML5 <audio> 开始尝试，它简单、高效且标准，如果你需要一个播放列表功能，再考虑 方法三，如果觉得麻烦，直接寻找 方法一 的插件。
