音频播放器组件示例

这是一篇 .mdx 示例文章，演示通用音频播放器组件。验证完成后可以删除本文，或把 frontmatter 中的 draft 改为 true。

一、基础用法

只传 src 即可，地址支持 public/ 下的相对路径（如 /audio/demo.mp3），也支持完整外链 URL：

0:00 / 0:00

二、带标题与副标题

Come Again HoliznaCC0

0:00 / 0:00

三、带封面

Come Again HoliznaCC0

0:00 / 0:00

使用方法

在 .mdx 文章的 frontmatter 之后 import 组件：

import AudioPlayer from "../../components/AudioPlayer.astro";

<AudioPlayer
  src="/audio/come-again.mp3"
  title="曲目标题"
  artist="作者 / 说明"
  cover="/images/covers/cover-blue.svg"
/>

支持的属性：

src（必填）：音频地址，public/ 相对路径或完整外链 URL
title：标题
artist：副标题 / 作者 / 说明
cover：封面图
loop：是否循环播放，默认 false
preload：预加载策略，默认 "metadata"

控件包含播放/暂停、可拖动进度条、时间显示、倍速切换（1x → 1.25x → 1.5x → 2x → 0.75x）、音量与静音。同一页面放置多个播放器时，播放其中一个会自动暂停其它。