织梦如何添加音乐播放器？-织梦建站-盈思创科技

使用第三方音乐播放器代码（最简单、推荐新手）

这种方法最简单,不需要修改织梦核心文件，只需要在需要显示播放器的页面（如文章内容、首页等）插入一段HTML和JavaScript代码即可。

（图片来源网络，侵删）

优点：

简单快捷： 无需修改程序，复制粘贴即可。
功能丰富： 可以找到很多带有歌词、列表、皮肤等功能的播放器。
安全： 不涉及织梦文件修改，不影响网站升级。

缺点：

非官方： 稳定性和长期维护取决于第三方服务。
可能加载慢： 播放器脚本可能需要从外部服务器加载。

操作步骤：

选择一个音乐播放器：

（图片来源网络，侵删）

网易云/QQ音乐外链播放器： 这是最受欢迎的选择，可以嵌入网易云或QQ音乐的歌曲，界面美观，功能齐全。
APlayer： 一个非常流行的开源HTML5音乐播放器，支持自定义，可以本地或在线加载音乐。
其他第三方平台： 如Meting.js（专门用于嵌入网易云、QQ音乐等平台的音乐）。

这里我们以网易云外链播放器为例，因为它最简单，效果最好。

获取歌曲外链代码：

打开网易云音乐网页版,找到你想要的歌曲。
点击歌曲右侧的“分享”按钮。
在弹出的分享菜单中选择“复制外链播放器代码”。

你会得到类似下面这样的代码：

<iframe frameborder="0" border="0" marginwidth="0" marginheight="0" width=330" height="450" src="https://music.163.com/outchain/player?type=2&id=1901378348&auto=1&height=430"></iframe>

type=2 表示单曲。
id=... 是歌曲ID。
auto=1 表示自动播放。
height 和 width 是播放器的尺寸。

在织梦后台添加播放器：

场景A：添加到单篇文章内容中

 1.  登录织梦后台，进入“[核心] -> [内容管理] -> [普通文章]”。
 2.  编辑你想要添加音乐的文章。
 3.  将上面复制的网易云播放器代码，粘贴到文章内容编辑器的任意位置（比如文章末尾）。
 4.  点击“保存”或“更新”即可。

场景B：添加到首页或自定义页面

 1.  如果你希望播放器在网站的某个固定位置（如侧边栏、底部），修改对应的模板文件是最直接的方法。
 2.  想在首页显示，请修改 `/templets/default/index.htm` 文件。
 3.  在你希望显示播放器的位置（`footer` 标签内或侧边栏 `fl` 或 `fr` 的div里），插入播放器代码。
 4.  保存并上传覆盖原模板文件。

使用织梦自定义表单/字段（更灵活）

如果你想让前台用户自己提交歌曲链接,或者想在文章中嵌入更多自定义信息，可以使用织梦的自定义表单或文章模型功能。

（图片来源网络，侵删）

以添加文章自定义字段为例：

创建自定义字段：

在后台进入“[核心] -> [频道模型] -> [内容模型管理]”。
找到你常用的模型（如“文章”模型），点击“修改”。
进入“字段管理”选项卡，点击“添加新字段”。
字段名称： music_player (可以自定义)
字段别名： music_player (通常和名称一样，用英文)
字段类型： 文本area (因为我们要粘贴一段HTML代码)
提示文字： 音乐播放器代码 (在后台编辑文章时显示的提示)
是否为必填项： 否
保存。

修改文章内容模板（article_article_list.htm 和 article_article_.htm）：

进入“[模板] -> [默认模板管理]”。
找到文章列表页模板 article_article_list.htm 和文章内容页模板 article_article.htm。
在需要显示播放器的地方（比如文章列表的摘要里，或者文章内容的末尾），添加以下代码：
```
{dede:field name='music_player'/}
```

 *   这行代码会输出该文章的 `music_player` 字段的内容。

在后台发布文章时添加播放器：

现在去编辑或发布文章,你会发现内容区域多了一个“音乐播放器代码”的输入框。
将你准备好的播放器代码（如网易云的iframe代码）粘贴进去。
发布文章后,前台就会在该文章中显示这个播放器。

优点：

灵活性高： 每篇文章可以拥有独立的播放器。
内容与表现分离： 后台管理内容，前台通过模板调用。

缺点：

需要修改模板和后台模型,对新手稍有难度。

使用APlayer + Meting.js（更专业、功能强大）

如果你想打造一个类似音乐博客的网站,并且希望播放器更美观、可控，推荐使用APlayer和Meting.js的组合，这种方法需要你有一定的HTML/CSS基础，可以自定义播放器样式和位置。

准备工作：

下载或找到 APlayer.min.css 和 APlayer.min.js 文件。
下载或找到 Meting.min.js 文件。
将这三个文件上传到你的织梦模板目录下,/templets/default/static/。

修改模板文件：

打开你的首页模板 index.htm 或者文章内容页模板 article_article.htm。

在 <head> 标签内引入APlayer的CSS文件：

<link rel="stylesheet" href="/templets/default/static/APlayer.min.css">

在 <body> 标签末尾（</body>之前）依次引入APlayer的JS和Meting的JS：

<div id="aplayer"></div>
<script src="/templets/default/static/APlayer.min.js"></script>
<script src="/templets/default/static/Meting.min.js"></script>

你可以给播放器容器 <div id="aplayer"></div> 添加一些CSS样式来控制位置和大小，
```
<style>
 #aplayer {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     z-index: 999;
 }
</style>
```
这会让播放器固定在页面底部。

配置播放器：

你可以通过给 <div id="aplayer"></div> 添加data-属性来配置播放器，

<div id="aplayer" data-server="netease" data-type="playlist" data-id="7346468348" data-fixed="true" data-listfolded="true" data-order="random"></div>

data-server: 服务器，如 netease (网易云), tencent (QQ音乐)。
data-type: 类型，如 song (单曲), playlist (歌单)。
data-id: 歌曲/歌单ID。
data-fixed: 是否固定在底部。
data-listfolded: 是否折叠播放列表。

优点：

高度可定制： 可以修改播放器的任何样式。
功能强大： 支持歌单、歌词、随机播放等。
纯前端实现： 不依赖第三方平台嵌入，加载速度和体验更可控。

缺点：

需要手动配置： 需要自己准备JS/CSS文件并配置参数。
技术要求稍高： 需要了解HTML/CSS/JS的基本知识。

总结与建议

方法	难度	灵活性	适用场景
第三方代码	★☆☆☆☆	★☆☆☆☆	只想在特定文章或页面添加一两个播放器，追求最快速度。
自定义字段	★★☆☆☆	★★★★☆	希望每篇文章都能独立添加不同的播放器，内容管理更规范。
APlayer+Meting	★★★☆☆	★★★★★	想要打造一个功能完善的音乐网站，对播放器外观和功能有高要求。

对于绝大多数用户,强烈推荐方法一，因为它最简单、最直接，效果也足够好，如果你是网站管理员，希望未来能更灵活地管理音乐内容，再考虑方法二，如果你是开发者或对前端有一定了解，希望打造独特的音乐站点，方法三是最佳选择。

织梦如何添加音乐播放器？

使用第三方音乐播放器代码（最简单、推荐新手）

使用织梦自定义表单/字段（更灵活）

使用APlayer + Meting.js（更专业、功能强大）

总结与建议

相关文章

目录[+]