电脑上的 <embed> 或 <object> 标签在手机上大多不被支持，或者体验很差。 手机浏览器更倾向于使用 <audio> 标签,或者提供一个更友好的外部播放器界面。

dede网页音乐代码适应手机
（图片来源网络，侵删）

下面我将提供几种从简单到推荐的解决方案,你可以根据自己网站的技术能力选择。

最简单的直接替换法 (适用于少量音乐)

如果你的页面音乐不多，可以直接修改DedeCMS的模板，将旧的音乐代码替换为现代的HTML5 <audio>

找到你的音乐代码

在DedeCMS后台，编辑你包含音乐的页面或文章模板,你可能会找到类似这样的代码：

<!-- 旧式代码，手机上可能无效 -->
<embed src="/uploads/music.mp3" width="0" height="0" type="audio/mpeg" autostart="true" loop="true">

或者

<object type="audio/mpeg" data="/uploads/music.mp3" width="200" height="20">
  <param name="src" value="/uploads/music.mp3">
  <param name="autoplay" value="true">
  <param name="controller" value="true">
  您的浏览器不支持音乐播放。
</object>

替换为HTML5 <audio>

这是最标准的做法,兼容性最好。

dede网页音乐代码适应手机
（图片来源网络，侵删）
<!-- 新式代码，手机电脑都支持 -->
<audio src="/uploads/music.mp3" controls style="width: 100%; max-width: 300px;">
  您的浏览器不支持音频播放。
</audio>

代码解释：

  • <audio>：定义音频内容。
  • src="/uploads/music.mp3"：你的音乐文件路径。
  • controls：必须加上！ 这会显示播放控件（播放/暂停、进度条、音量），让用户可以控制，而不是自动播放（自动播放在很多手机浏览器上是被禁止的，体验也很差）。
  • style="width: 100%; max-width: 300px;"：简单的CSS样式，让播放器宽度自适应父容器,但在电脑上不会无限拉宽。

优点：

  • 代码简单,直接有效。
  • 所有现代浏览器（包括手机浏览器）都支持。
  • 提供了标准的播放控件。

缺点：

  • 如果你的网站有大量文章需要修改,会比较繁琐。

使用DedeCMS自定义模型/字段 (推荐，适用于大量音乐)

如果你的网站是一个音乐分享类网站，有很多文章都包含音乐，那么为“音乐”创建一个专门的字段是最好的方法。

dede网页音乐代码适应手机
（图片来源网络，侵删）

步骤 1：添加一个新的自定义字段

  1. 登录DedeCMS后台。
  2. 进入「核心」 -> 「内容模型管理」。
  3. 找到你文章所在的内容模型（文章模型”），点击后面的「管理字段」。
  4. 点击「添加新字段」。
  5. 填写字段信息：
    • 字段名称：music (英文，小写,无空格)
    • 字段类型：多媒体文件 (这个类型会自带一个文件上传按钮)
    • 字段提示：上传音乐文件
    • 显示方式：后台文本框+前台播放器 (这是最关键的一步！)
    • 其他选项：可以根据需要设置,比如是否为必填项等。
  6. 保存。

步骤 2：在后台使用新字段

发布或编辑文章时，你会看到多了一个“上传音乐文件”的选项，点击上传,选择你的MP3文件并保存。

步骤 3：修改模板文件以调用音乐

在你需要显示音乐的模板文件中（通常是 article_article.htm）,使用DedeCMS的标签来调用这个字段。

{dede:field.music runphp='yes'}
    @me = "<audio src='{@me}' controls style='width: 100%; max-width: 300px; margin: 10px 0;'></audio>";
{/dede:field.music}

代码解释：

  • {dede:field.music}：这是调用你刚才创建的“music”字段的内容（即音乐文件的URL）。
  • runphp='yes'：允许在标签内使用PHP代码。
  • @me = "..."：将处理后的结果赋值给 @me。
  • {@me}：在PHP代码中，{@me} 代表原始的字段内容,也就是音乐文件的URL。

优点：

  • 非常专业和规范,符合DedeCMS的设计理念。
  • 后台管理方便,上传音乐就像上传图片一样简单。
  • 代码整洁,前台模板非常简洁。
  • 一劳永逸,以后所有文章添加音乐都通过这个字段完成。

使用第三方音乐播放器插件 (最灵活，功能最强)

如果你对播放器的样式、功能（如歌词、播放列表、皮肤等）有更高的要求,可以使用第三方音乐播放器插件。

操作步骤：

  1. 选择播放器：找一个支持响应式设计（即自适应手机）的HTML5音乐播放器。

    • APlayer：一款非常流行、简洁且功能强大的开源音乐播放器，支持歌词、播放列表。
    • Aplayer-for-DedeCMS：已经有大神将APlayer封装成了DedeCMS的专用插件,你可以直接下载使用。
    • 其他如 PlaxPlayer 等也可以考虑。

  2. 安装插件：

    • 下载插件包，通常包含 js 文件、css 文件和PHP调用文件。
    • 按照插件的说明文档，将JS和CSS文件上传到你的DedeCMS模板目录（/templets/default/）。
    • 在你的网站全局CSS文件（style.css）或模板的 <head> 部分引入CSS。
    • 在模板的底部（</body> 标签之前）引入JS文件。

  3. 调用音乐：

    • 插件通常会提供调用代码，你需要在模板中预留一个位置给播放器,然后用PHP代码来填充音乐数据。
    • 使用APlayer，你的模板里可能需要这样一个 div：
      <div id="aplayer"></div>
    • 然后在JS调用代码中，传入你的音乐URL等信息,这通常需要修改一个JS文件或在模板里写一段内联JS。

优点：

  • 功能强大，可以支持歌词、播放列表、多种皮肤等。
  • 外观漂亮,可以极大提升用户体验。
  • 通常都是响应式设计,手机端体验很好。

缺点：

  • 需要一定的技术能力来安装和配置。
  • 增加了网站的依赖，如果插件停止更新,可能会有兼容性问题。

总结与最终建议

方案 优点 缺点 适用场景
直接替换 简单快速，零门槛 修改繁琐，不适合大量内容 偶尔在几个页面添加音乐，不想折腾后台。
自定义字段 最推荐，规范、高效、易于管理 需要一次性设置后台 音乐类网站，或文章中需要频繁插入音乐的情况。
第三方插件 功能最强，外观最炫 需要技术能力，有额外依赖 对播放器功能和外观有较高要求的网站。

给你的最终建议：

  • 如果你的音乐内容不多，就用方案一,最快解决问题。
  • 如果你的网站以音乐为核心，或者有很多文章需要加音乐，请务必使用方案二，这是最专业、最长久、最省心的方法。
  • 如果你想让你的音乐播放器看起来非常酷炫，并且有时间折腾，可以研究一下方案三。

无论选择哪种方案，请记住核心原则：告别 <embed> 和 <object>，拥抱 <audio> 标签或现代的JS播放器,这样才能确保你的网站在手机上有完美的音乐播放体验。