跳到主要内容

Hexo 添加音乐播放器

Hexo 是一个基于 Node.js 的静态博客框架，虽然 Markdown 本身不支持音频播放，但我们可以通过多种方式在 Hexo 博客中嵌入音乐播放器。

方法一：HTML 标签嵌入​

添加 MP3 格式的音频​

Markdown 没有提供音频的语法支持，不过我们可以在页面中直接添加 html 代码实现音乐的添加。例如：

<audio controls name="media">
  <source src="https://res.wx.qq.com/voice/getvoice?mediaid=MzI4NjAxNjY4N181MDI3NDM5OTM=" type="audio/mp3" />
</audio>

效果：

The Moon Song 🌕​

<audio controls name="media">
  <source src="https://static.getiot.tech/audio/the-moon-song.mp3" type="audio/mp3" />
</audio>

效果：

添加 WAV 格式的音频​

<audio controls name="media">
  <source src="https://static.getiot.tech/audio/sample1.wav" type="audio/wav" />
</audio>

效果：

方法二：Hexo 标签插件​

创建自定义标签​

在 Hexo 的 scripts 文件夹中创建 audio.js：

hexo.extend.tag.register('audio', function(args, content) {
  const src = args[0];
  const title = args[1] || '音乐';
  const artist = args[2] || '未知艺术家';
  
  return `
    <div class="hexo-audio-player">
      <h4>${title} - ${artist}</h4>
      <audio controls>
        <source src="${src}" type="audio/mpeg">
        您的浏览器不支持音频播放。
      </audio>
    </div>
  `;
});

使用自定义标签​

{% audio /music/song.mp3 "歌曲名称" "艺术家" %}

方法三：第三方音乐平台嵌入​

网易云音乐​

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 
  src="//music.163.com/outchain/player?type=2&id=1901371647&auto=1&height=66">
</iframe>

QQ音乐​

<iframe frameborder="0" border="0" marginwidth="0" marginheight="0" width=350 height=96 
  src="//i.y.qq.com/n2/m/outchain/player/index.html?songid=你的歌曲ID">
</iframe>

方法四：Hexo 主题集成​

在主题中添加音频支持​

  1. 创建音频组件：在主题的 layout 文件夹中创建 audio.ejs
  2. 添加样式：在主题的 CSS 文件中添加音频播放器样式
  3. 配置选项：在主题配置文件中添加音频相关设置

示例主题配置​

# _config.yml
audio:
  enable: true
  autoplay: false
  loop: false
  volume: 0.8
  playlist:
    - title: "歌曲1"
      artist: "艺术家1"
      src: "/music/song1.mp3"
    - title: "歌曲2"
      artist: "艺术家2"
      src: "/music/song2.mp3"

方法五：JavaScript 增强​

添加播放列表功能​

// 在主题的 JS 文件中添加
class HexoAudioPlayer {
  constructor() {
    this.playlist = [];
    this.currentIndex = 0;
    this.audio = new Audio();
    this.init();
  }
  
  init() {
    this.bindEvents();
    this.loadPlaylist();
  }
  
  bindEvents() {
    // 绑定播放、暂停、上一首、下一首等事件
  }
  
  loadPlaylist() {
    // 从配置或 API 加载播放列表
  }
}

// 初始化播放器
new HexoAudioPlayer();

样式定制​

基础样式​

.hexo-audio-player {
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin: 20px 0;
}

.hexo-audio-player h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
}

.hexo-audio-player audio {
  width: 100%;
  height: 40px;
}

响应式设计​

@media (max-width: 768px) {
  .hexo-audio-player {
    padding: 10px;
  }
  
  .hexo-audio-player audio {
    height: 35px;
  }
}

最佳实践​

1. 音频文件管理​

  • 将音频文件放在 source/music/ 目录下
  • 使用相对路径引用音频文件
  • 考虑音频文件大小，适当压缩

2. 用户体验​

  • 避免自动播放，让用户主动选择
  • 提供播放控制选项（播放、暂停、音量等）
  • 支持播放列表和循环播放

3. 性能优化​

  • 使用 preload="metadata" 预加载音频信息
  • 延迟加载非关键音频文件
  • 考虑使用 CDN 加速音频文件

4. 兼容性​

  • 提供多种音频格式支持（MP3、WAV、OGG）
  • 添加浏览器兼容性提示
  • 测试不同设备和浏览器的表现

常见问题​

  1. 音频文件无法播放？

    检查文件路径、格式支持和服务器配置。

  2. 如何添加播放列表？

    使用 JavaScript 创建播放列表功能，或集成第三方播放器。

  3. 如何自定义播放器样式？

    通过 CSS 覆盖默认样式，或创建自定义的 HTML 结构。

  4. 支持哪些音频格式？

    主要支持 MP3、WAV、OGG 等格式，具体取决于浏览器支持。

参考​

🤔