APlayer 音频播放器测试

本文档旨在测试 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.