本文档旨在测试 APlayer 音频播放器在 Hugo 网站中的集成与表现。APlayer 是一款功能强大且易于定制的 HTML5 音频播放器，支持多种播放模式和功能，如播放列表、随机播放、循环播放、音量控制、进度条拖拽等。

集成 APlayer 到 Hugo 站点通常涉及在 Markdown 文件中插入特定的短代码或 HTML 结构，并确保 Hugo 的主题或配置能够正确渲染这些元素。本文将展示 APlayer 的基本用法，包括单个音频文件的播放以及播放列表的创建。

单个音频文件播放示例：

<figure>
  <figcaption>播放示例：世界杯主题曲</figcaption>
  <audio controls src="/path/to/your/audio/worldcup-anthem.mp3">
    您的浏览器不支持 audio 元素。
  </audio>
</figure>

在实际的 Hugo 项目中，音频文件通常会放置在 static 文件夹下，并通过相对路径进行引用。

播放列表示例：

APlayer 同样支持创建包含多个音频文件的播放列表，这对于发布播客或音乐专辑非常有用。通过 APlayer 的 JavaScript API 或预设的短代码，可以方便地实现这一点。

<div id="player1" class="aplayer"></div>
<script>
  var ap1 = new APlayer({
    element: document.getElementById('player1'),
    mini: false,
    autoplay: false,
    showlrc: false,
    audio: [
      {
        name: '歌曲名1',
        artist: '艺术家1',
        url: '/path/to/song1.mp3',
        cover: '/path/to/cover1.jpg'
      },
      {
        name: '歌曲名2',
        artist: '艺术家2',
        url: '/path/to/song2.mp3',
        cover: '/path/to/cover2.jpg'
      }
    ]
  });
</script>

通过这种方式，可以在页面中嵌入一个功能齐全的音频播放器，用户可以方便地在歌曲之间切换，并控制播放。在世界杯赛事平台中，可以利用此功能分享足球相关的播客、音乐或精彩的比赛解说片段，增强用户体验。