更新记录

v1.0.0（2025-10-15） 下载此版本

feat: 新增音频播放组件

平台兼容性

其他

ky-audio

使用方式

<ky-audio
    :activeIndex="audioActiveIndex" 
    :audioData="audioList" 
    :autoplay="true"
    :loopPlay="true"
    :showAudioListIcon="false" 
    :showAudioSpeedIcon="true"
    @onOpenAudioList="onOpenAudioList"
    @onAudioChange="onAudioChange"
    @onAudioEnd="onAudioEnd"
    @onPlayProgress="onPlayProgress"
></ky-audio>

组件的属性说明如下：

audioData参数说明：

事件

API（组件方法）

通过 ref 获取组件实例，调用下列方法：

<ky-audio ref="audioRef" />

// 暂停播放
this.$refs.audioRef.pauseAudio()

// 恢复播放
this.$refs.audioRef.resumeAudio()

// 清空播放状态（可选是否清空播放列表）
// 传 true 将同时清空列表
this.$refs.audioRef.clearAudio(true)

平台支持

• Android（App）
• iOS（App）
• 鸿蒙（App）

注意：

• H5 与 iOS 对自动播放有限制，建议在用户交互后再触发播放。
• 小程序端需在后台域名白名单中配置音频资源域名。

多端测试清单（建议）

主题与布局

• 主题色使用 CSS 变量（--ky-primary/--ky-text/--ky-muted/--ky-bg），可在外部覆写。

• 内置暗黑模式：跟随系统 prefers-color-scheme: dark，也可在外层容器加 .dark 强制启用。

• 宽屏优化：内容区域最大宽度 1200px，自动居中，并在 1024px 以上适当增大控件尺寸。

• 播放控制

  • 首次点击播放是否正常启动（各端自动播放限制差异）
  • 暂停/继续/切歌（上一首/下一首）是否正常
  • 倍速切换（H5/非 H5 表现一致性）
  • 进度拖拽：改变进度、边界值（0、末尾）

• 列表与循环

  • 列表播放结束事件触发
  • 循环播放开启时能否从头继续

• 网络与资源

  • https 资源播放是否稳定
  • 第三方域名跨域/白名单配置是否完整（小程序）

• 后台与系统交互（App）

  • 后台播放保持（切前后台不终止）
  • 系统播放面板上一曲/下一曲事件（iOS）
  • 来电/闹钟中断后的恢复

• 设备能力（硬件与系统）

  • Android 不同厂商机型（电源优化）
  • iOS 静音键/铃声音量影响
  • 鸿蒙应用管控与权限提示

• 边界与异常

  • 无效 URL、404、超时、CORS 错误提示
  • 列表为空、索引越界处理
  • 清空播放后再次播放的体验