简便音频播放器

地址：功能演示-demo

极简的音频播放器。 基于 React 开发。

安装 install

npm i tiny-audio-play

或者 OR

yarn add tiny-audio-play

页面引入

import { TinyAudioPlay } from "tiny-audio-play";

使用说明

// 默认样式，宽度100%
<TinyAudioPlay src="xxxx" />

// 圆形样式
<TinyAudioPlay src="xxxx" type="circle" />

// 颜色、宽度
<TinyAudioPlay 
  src="xxxx" 
  width={400}
  bgColor="#f6f9ff"
  mainColor="#4c7dff"
  trackColor="#d9e3ff"
/>

// 圆形颜色、大小、轨道宽度
<TinyAudioPlay 
  type="circle"
  src="xxxx"
  width={40}
  mainColor="#a77cff"
  trackColor="#e2d6ff"
  trackWidth={5}
/>

组件属性（props）

/** 音频地址 */
src: string;
/** 类型，default | circle.  默认：default */
type?: "default" | "circle";
/** 自定义样式 */
className?: string;
/** 主色 */
mainColor?: string;
/** 背景色 */
bgColor?: string;
/** 文字颜色 */
fontColor?: string;
/** 组件宽度，默认100% */
width?: number;
/** 进度轨道、音量轨道颜色 */
trackColor?: string;
/** 简版轨道宽度 */
trackWidth?: number;
/** 是否需要下载 */
downloadFile?: boolean;
/** 下载文件名称 */
filename?: string;

传入 ref 获取组件实例

/**
 * 组件方法：
 * play: () => void;
 * pause: () => void;
 * mute: () => void;
 */

const ref = useRef();
<TinyAudioPlay src="xxxx" ref={ref} />

React版本

"react": ">=16.8.0",
"react-dom": ">=16.8.0"

更新日志

[1.0.3] - 2025-11-17

更新内容

-- 处理浏览器样式兼容问题。

[1.0.2] - 2025-11-16

更新内容

-- 更新README.md文档，增加功能演示地址。

[1.0.1] - 2025-10-24

更新内容

-- 更新README.md文档

[1.0.0] - 2025-10-24

首次发布