更新记录

1.0.0（2026-04-02） 下载此版本

1.0.0 版本首发： 基于 Vue3 + Vite 开发，性能极佳。 适配 uni_modules 规范，支持 easycom 自动引入。 支持自定义颜色、背景、滑块大小。 提供插槽支持，可完全自定义播放/暂停图标。 零依赖，兼容小程序、App 及 H5。

平台兼容性

uni-app(3.7.3)

其他

Sunny-Audio-Player 音频播放组件

基于 uni-app Vue3 + setup 语法糖 开发的轻量音频播放组件，无第三方依赖、全端兼容，适配DCloud生态（微信小程序/App/H5等），可直接发布至DCloud插件市场，开箱即用。

组件简介

一款简洁、高效、可高度自定义的音频播放组件，支持播放/暂停、进度拖拽、实时进度更新，提供灵活插槽和完整事件监听，兼顾易用性和扩展性，适合各类需要音频播放功能的uni-app项目（课程音频、语音播报、语音消息等）。

核心特性

• 💡 纯原生实现：基于uni-app内置API（uni.createInnerAudioContext），无任何第三方依赖，体积轻量
• 🎨 高度自定义：支持主题色、背景色、滑块大小自定义，插槽可定制图标和时间显示
• 🎧 完整功能：播放/暂停、进度条拖拽、进度实时更新、播放结束自动重置
• 🔄 动态适配：支持src音频地址动态切换，自动重载播放器
• 🛡️ 稳定可靠：完善的生命周期管理，页面卸载自动销毁音频实例，防止内存泄漏
• 🌍 全端兼容：支持微信小程序、App（iOS/Android）、H5，兼容支付宝/百度/抖音小程序
• 📱 符合规范：完全适配DCloud插件市场要求，无需额外配置，下载即可使用

适用平台

• 微信小程序（优先适配）
• App端（iOS/Android）
• H5端
• 支付宝/百度/抖音小程序（兼容适配）

快速使用（下载即用）

1. 组件部署

将组件文件放入uni-app项目指定目录，目录结构如下（规范命名，便于引用）：

/components/sunny-audio-player/
├─ sunny-audio-player.vue   组件主文件（核心）
└─ readme.md              

2. 页面引入与使用（最简示例）

<template>
  <!-- 基础使用：仅传入音频地址即可 -->
  <sunny-audio-player
    src="https://xxx.com/xxx.mp3"  <!-- 替换为你的有效音频地址 -->
  />
</template>

<script setup>
// 引入组件（路径根据自身项目调整）
import SunnyAudioPlayer from '@/components/sunny-audio-player/sunny-audio-player.vue'
</script>

3. 完整使用示例（带自定义样式+事件监听）

<template>
  <sunny-audio-player
    src="https://xxx.com/xxx.mp3"
    active-color="#ff4d4f"        <!-- 自定义进度条激活色 -->
    bg-color="#f5f5f5"           <!-- 自定义组件背景色 -->
    block-size="16"              <!-- 自定义滑块大小 -->
    autoplay="false"             <!-- 是否自动播放 -->
    @play="handlePlay"
    @pause="handlePause"
    @ended="handleEnded"
    @error="handleError"
  >
    <!-- 自定义播放/暂停图标（插槽用法） -->
    <template #icon="{ isPlaying }">
      <text style="font-size: 32rpx;">{{ isPlaying ? '⏸️' : '▶️' }}</text>
    </template>
    <!-- 自定义时间显示（插槽用法） -->
    <template #time="{ current, duration }">
      <view style="font-size: 24rpx; margin-left: 20rpx; color: #666;">
        {{ formatTime(current) }} / {{ formatTime(duration) }}
      </view>
    </template>
  </sunny-audio-player>
</template>

<script setup>
import SunnyAudioPlayer from '@/components/sunny-audio-player/sunny-audio-player.vue'

// 时间格式化（可选，优化显示）
const formatTime = (seconds) => {
  const min = Math.floor(seconds / 60);
  const sec = Math.floor(seconds % 60);
  return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
};

// 事件监听
const handlePlay = () => console.log('音频开始播放');
const handlePause = () => console.log('音频暂停播放');
const handleEnded = () => console.log('音频播放结束');
const handleError = (err) => console.log('播放错误：', err);
</script>

Props 参数说明（全部可选，有默认值）

事件说明（可按需监听）

插槽说明（高度自定义）

1. 图标插槽（name: icon）

用于自定义播放/暂停图标，插槽会暴露 isPlaying 变量（布尔值，判断当前是否正在播放）。

<template #icon="{ isPlaying }">
  <!-- 可替换为自己的图标（SVG/图片/文字） -->
  <image src="{{ isPlaying ? '/static/pause.png' : '/static/play.png' }}" mode="widthFix" style="width: 40rpx; height: 40rpx;" />
</template>

2. 时间插槽（name: time）

用于自定义时间显示格式，插槽会暴露 current（当前播放时间，秒）和 duration（音频总时长，秒）两个变量。

<template #time="{ current, duration }">
  <view style="font-size: 24rpx; color: #999;">
    {{ current | formatTime }} / {{ duration | formatTime }}
  </view>
</template>

父组件调用实例方法

通过 ref 引用组件，可主动调用播放、暂停、停止方法，实现更灵活的控制。

<template>
  <sunny-audio-player ref="audioRef" src="https://xxx.com/xxx.mp3" />
  <button @click="handlePlay">主动播放</button>
  <button @click="handlePause">主动暂停</button>
</template>

<script setup>
import { ref } from 'vue';
import SunnyAudioPlayer from '@/components/sunny-audio-player/sunny-audio-player.vue';

const audioRef = ref(null);

// 主动播放
const handlePlay = () => {
  audioRef.value?.play();
};

// 主动暂停
const handlePause = () => {
  audioRef.value?.pause();
};

// 主动停止（重置进度）
const handleStop = () => {
  audioRef.value?.stop();
};
</script>

注意事项

• src 必须传入 有效、可访问的音频地址，否则无法正常播放，会触发 error 事件。
• 小程序平台（如微信）需在公众平台 配置音频合法域名，否则会出现播放失败（跨域问题）。
• autoplay 自动播放功能，在部分浏览器、小程序平台受限制（出于用户体验和隐私保护），建议谨慎使用。
• 组件离开页面（onUnmounted）时会自动销毁音频实例，无需手动处理，避免内存泄漏。
• 进度条拖拽时，会暂时暂停进度更新，拖拽结束后自动定位到对应进度，保证操作流畅性。
• 样式可通过 scoped 样式穿透（::v-deep）进一步自定义，适配自身项目UI风格。

组件结构（下载后直接放入项目）

sunny-audio-player/
├─ sunny-audio-player.vue   // 组件核心文件（无需修改，直接使用）
└─ readme.md                // 使用说明（本文件，可保留或删除）

作者说明

组件基于uni-app Vue3 setup语法开发，轻量简洁、无版权问题，可商用、可二次开发。

若有问题或需求，可在DCloud插件市场留言反馈，持续优化更新。