@easy-editor/materials-dashboard-audio 0.0.2

package/dist/meta.min.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.min.js","sources":["../../../../shared/src/index.ts","../src/constants.ts","../src/meta.ts","../src/snippets.ts","../src/configure.ts"],"sourcesContent":["/**\n * Shared types, components and utilities for EasyEditor materials\n * @package @easy-editor/materials-shared\n */\n\n// 物料分组常量\nexport const MaterialGroup = {\n  /** 内置 */\n  INNER: 'inner',\n  /** 基础 */\n  BASIC: 'basic',\n  /** 图表 */\n  CHART: 'chart',\n  /** 数据展示 */\n  DISPLAY: 'display',\n  /** 媒体 */\n  MEDIA: 'media',\n  /** 交互 */\n  INTERACTION: 'interaction',\n  /** 地图 */\n  MAP: 'map',\n} as const\n\nexport type MaterialGroup = (typeof MaterialGroup)[keyof typeof MaterialGroup]\n\n// 工具函数\nexport { cn } from './lib/utils'\n\nexport * from './types'\n","/**\n * 物料常量配置\n * 统一管理全局变量名等配置，确保 meta.ts 和 rollup.config.js 使用相同的值\n */\n\n/**\n * UMD 全局变量基础名称\n * 用于构建：\n * - 元数据：${GLOBAL_NAME}Meta (例如: EasyEditorMaterialsAudioMeta)\n * - 组件：${GLOBAL_NAME}Component (例如: EasyEditorMaterialsAudioComponent)\n * - 完整构建：${GLOBAL_NAME} (例如: EasyEditorMaterialsAudio)\n */\nexport const COMPONENT_NAME = 'EasyEditorMaterialsAudio'\n\n/**\n * 包名\n */\nexport const PACKAGE_NAME = '@easy-editor/materials-dashboard-audio'\n","/**\n * Audio Meta\n * 音频组件元数据\n */\n\nimport type { ComponentMetadata } from '@easy-editor/core'\nimport { MaterialGroup } from '@easy-editor/materials-shared'\nimport { COMPONENT_NAME, PACKAGE_NAME } from './constants'\nimport configure from './configure'\nimport snippets from './snippets'\nimport pkg from '../package.json'\n\nexport const meta: ComponentMetadata = {\n  componentName: COMPONENT_NAME,\n  title: '音频',\n  group: MaterialGroup.MEDIA,\n  devMode: 'proCode',\n  npm: {\n    package: PACKAGE_NAME,\n    version: pkg.version,\n    globalName: COMPONENT_NAME,\n    componentName: COMPONENT_NAME,\n  },\n  snippets,\n  configure,\n}\n\nexport default meta\n","/**\n * Audio Snippets\n * 音频组件代码片段\n */\n\nimport type { Snippet } from '@easy-editor/core'\nimport { COMPONENT_NAME } from './constants'\n\nexport const snippets: Snippet[] = [\n  {\n    title: '音频播放器',\n    screenshot: '',\n    schema: {\n      componentName: COMPONENT_NAME,\n      props: {\n        src: '',\n        title: '音频文件',\n        autoPlay: false,\n        loop: false,\n        audioStyle: 'custom',\n      },\n      $dashboard: {\n        rect: {\n          width: 300,\n          height: 60,\n        },\n      },\n    },\n  },\n  {\n    title: '原生音频',\n    screenshot: '',\n    schema: {\n      componentName: COMPONENT_NAME,\n      props: {\n        src: '',\n        title: '音频文件',\n        audioStyle: 'native',\n      },\n      $dashboard: {\n        rect: {\n          width: 300,\n          height: 60,\n        },\n      },\n    },\n  },\n]\n\nexport default snippets\n","/**\n * Audio Configure\n * 音频组件配置\n */\n\nimport type { Configure } from '@easy-editor/core'\nimport type { UploadValue } from '@easy-editor/materials-shared'\n\nexport const configure: Configure = {\n  props: [\n    {\n      type: 'group',\n      title: '属性',\n      setter: 'TabSetter',\n      items: [\n        {\n          type: 'group',\n          key: 'config',\n          title: '配置',\n          setter: {\n            componentName: 'CollapseSetter',\n            props: {\n              icon: false,\n            },\n          },\n          items: [\n            // 基础配置\n            {\n              name: 'id',\n              title: 'ID',\n              setter: 'NodeIdSetter',\n              extraProps: {\n                // @ts-expect-error label is not a valid extra prop\n                label: false,\n              },\n            },\n            {\n              name: 'title',\n              title: '标题',\n              setter: 'StringSetter',\n              extraProps: {\n                getValue(target) {\n                  return target.getExtraPropValue('title')\n                },\n                setValue(target, value) {\n                  target.setExtraPropValue('title', value)\n                },\n              },\n            },\n            {\n              type: 'group',\n              title: '基础属性',\n              setter: {\n                componentName: 'CollapseSetter',\n                props: {\n                  icon: false,\n                },\n              },\n              items: [\n                {\n                  name: 'rect',\n                  title: '位置尺寸',\n                  setter: 'RectSetter',\n                  extraProps: {\n                    getValue(target) {\n                      return target.getExtraPropValue('$dashboard.rect')\n                    },\n                    setValue(target, value) {\n                      target.setExtraPropValue('$dashboard.rect', value)\n                    },\n                  },\n                },\n              ],\n            },\n            // 组件配置\n            {\n              type: 'group',\n              title: '内容',\n              setter: {\n                componentName: 'CollapseSetter',\n                props: {\n                  icon: false,\n                },\n              },\n              items: [\n                {\n                  name: '__upload',\n                  title: '上传',\n                  setter: {\n                    componentName: 'UploadSetter',\n                    props: {\n                      accept: '.mp3,.wav,.ogg',\n                    },\n                  },\n                  extraProps: {\n                    setValue(target, value: UploadValue) {\n                      if (value) {\n                        const { base64, raw } = value\n                        if (base64) {\n                          target.parent.setPropValue('src', base64)\n                        }\n                        if (raw?.width) {\n                          target.parent.setExtraPropValue('$dashboard.rect.width', raw.width)\n                        }\n                        if (raw?.height) {\n                          target.parent.setExtraPropValue('$dashboard.rect.height', raw.height)\n                        }\n                      } else {\n                        target.parent.clearPropValue('src')\n                      }\n                    },\n                  },\n                },\n                {\n                  name: 'src',\n                  title: '音频地址',\n                  setter: 'StringSetter',\n                },\n                {\n                  name: 'title',\n                  title: '标题',\n                  setter: 'StringSetter',\n                  extraProps: {\n                    defaultValue: '音频文件',\n                  },\n                },\n              ],\n            },\n            {\n              type: 'group',\n              title: '播放',\n              setter: {\n                componentName: 'CollapseSetter',\n                props: {\n                  icon: false,\n                },\n              },\n              items: [\n                {\n                  name: 'autoPlay',\n                  title: '自动播放',\n                  setter: 'SwitchSetter',\n                  extraProps: {\n                    defaultValue: false,\n                  },\n                },\n                {\n                  name: 'loop',\n                  title: '循环播放',\n                  setter: 'SwitchSetter',\n                  extraProps: {\n                    defaultValue: false,\n                  },\n                },\n                {\n                  name: 'audioStyle',\n                  title: '样式类型',\n                  setter: {\n                    componentName: 'SelectSetter',\n                    props: {\n                      options: [\n                        { label: '自定义', value: 'custom' },\n                        { label: '原生', value: 'native' },\n                      ],\n                    },\n                  },\n                  extraProps: {\n                    defaultValue: 'custom',\n                  },\n                },\n                {\n                  name: 'playbackRate',\n                  title: '播放速度',\n                  setter: {\n                    componentName: 'SelectSetter',\n                    props: {\n                      options: [\n                        { label: '0.5x', value: 0.5 },\n                        { label: '0.75x', value: 0.75 },\n                        { label: '1x (正常)', value: 1 },\n                        { label: '1.25x', value: 1.25 },\n                        { label: '1.5x', value: 1.5 },\n                        { label: '2x', value: 2 },\n                      ],\n                    },\n                  },\n                  extraProps: {\n                    defaultValue: 1,\n                  },\n                },\n                {\n                  name: 'volume',\n                  title: '音量',\n                  setter: {\n                    componentName: 'SliderSetter',\n                    props: {\n                      min: 0,\n                      max: 100,\n                      step: 1,\n                      suffix: '%',\n                    },\n                  },\n                  extraProps: {\n                    defaultValue: 100,\n                  },\n                },\n              ],\n            },\n          ],\n        },\n        {\n          type: 'group',\n          key: 'data',\n          title: '数据',\n          items: [\n            {\n              name: 'dataBinding',\n              title: '数据绑定',\n              setter: 'DataBindingSetter',\n            },\n          ],\n        },\n        {\n          type: 'group',\n          key: 'advanced',\n          title: '高级',\n          items: [\n            {\n              name: 'condition',\n              title: '显隐控制',\n              setter: 'SwitchSetter',\n              extraProps: {\n                defaultValue: true,\n                supportVariable: true,\n              },\n            },\n          ],\n        },\n      ],\n    },\n  ],\n  component: {},\n  supports: {},\n  advanced: {},\n}\n\nexport default configure\n"],"names":["COMPONENT_NAME","meta","componentName","title","group","devMode","npm","package","version","globalName","snippets","screenshot","schema","props","src","autoPlay","loop","audioStyle","$dashboard","rect","width","height","configure","type","setter","items","key","icon","name","extraProps","label","getValue","target","getExtraPropValue","setValue","value","setExtraPropValue","accept","base64","raw","parent","setPropValue","clearPropValue","defaultValue","options","min","max","step","suffix","supportVariable","component","supports","advanced"],"mappings":"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"}

package/dist/src/component.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Audio Component
+ * 音频播放组件
+ */
+import { type CSSProperties, type Ref } from 'react';
+export type AudioStyle = 'custom' | 'native';
+export interface AudioProps {
+    ref?: Ref<HTMLDivElement>;
+    /** 音频地址 */
+    src?: string;
+    /** 标题 */
+    title?: string;
+    /** 自动播放 */
+    autoPlay?: boolean;
+    /** 循环播放 */
+    loop?: boolean;
+    /** 样式类型 */
+    audioStyle?: AudioStyle;
+    /** 外部样式 */
+    style?: CSSProperties;
+}
+export declare const Audio: React.FC<AudioProps>;
+export default Audio;

package/dist/src/configure.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Audio Configure
+ * 音频组件配置
+ */
+import type { Configure } from '@easy-editor/core';
+export declare const configure: Configure;
+export default configure;

package/dist/src/constants.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 物料常量配置
+ * 统一管理全局变量名等配置，确保 meta.ts 和 rollup.config.js 使用相同的值
+ */
+/**
+ * UMD 全局变量基础名称
+ * 用于构建：
+ * - 元数据：${GLOBAL_NAME}Meta (例如: EasyEditorMaterialsAudioMeta)
+ * - 组件：${GLOBAL_NAME}Component (例如: EasyEditorMaterialsAudioComponent)
+ * - 完整构建：${GLOBAL_NAME} (例如: EasyEditorMaterialsAudio)
+ */
+export declare const COMPONENT_NAME = "EasyEditorMaterialsAudio";
+/**
+ * 包名
+ */
+export declare const PACKAGE_NAME = "@easy-editor/materials-dashboard-audio";

package/dist/src/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Audio Entry
+ * 音频组件入口
+ */
+export { Audio as component } from './component';
+export { default as meta } from './meta';

package/dist/src/meta.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Audio Meta
+ * 音频组件元数据
+ */
+import type { ComponentMetadata } from '@easy-editor/core';
+export declare const meta: ComponentMetadata;
+export default meta;

package/dist/src/snippets.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Audio Snippets
+ * 音频组件代码片段
+ */
+import type { Snippet } from '@easy-editor/core';
+export declare const snippets: Snippet[];
+export default snippets;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@easy-editor/materials-dashboard-audio",
+  "version": "0.0.2",
+  "description": "Audio component for EasyEditor dashboard",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "jsdelivr": "dist/index.min.js",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "homepage": "https://github.com/Easy-Editor/EasyMaterials",
+  "license": "MIT",
+  "author": "JinSo <kimjinso@qq.com>",
+  "keywords": [
+    "@easy-editor",
+    "easyeditor",
+    "low-code",
+    "dashboard",
+    "audio",
+    "player",
+    "component",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Easy-Editor/EasyMaterials",
+    "directory": "packages/dashboard/media/audio"
+  },
+  "bugs": {
+    "url": "https://github.com/Easy-Editor/EasyMaterials/issues"
+  },
+  "peerDependencies": {
+    "@easy-editor/core": "*",
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "@easy-editor/materials-shared": "0.0.0"
+  },
+  "devDependencies": {
+    "@originjs/vite-plugin-federation": "^1.4.1"
+  },
+  "scripts": {
+    "dev": "vite",
+    "format": "biome format --write .",
+    "lint": "biome check .",
+    "build": "npm-run-all -nl build:*",
+    "build:clean": "rimraf dist/",
+    "build:js": "rollup -c",
+    "build:types": "pnpm types",
+    "types": "npm-run-all -nl types:*",
+    "types:src": "tsc --project tsconfig.build.json",
+    "test-types": "tsc --project tsconfig.test.json"
+  },
+  "module": "dist/index.esm.js",
+  "unpkg": "dist/index.min.js"
+}

package/rollup.config.js

@@ -0,0 +1,222 @@
+import babel from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import json from '@rollup/plugin-json'
+import { terser } from 'rollup-plugin-terser'
+import cleanup from 'rollup-plugin-cleanup'
+import postcss from 'rollup-plugin-postcss'
+import pkg from './package.json' with { type: 'json' }
+
+const GLOBAL_NAME = 'EasyEditorMaterialsAudio'
+
+// 外部依赖（不打包进组件）
+const external = ['react', 'react-dom', 'react/jsx-runtime', '@easy-editor/core']
+
+const globals = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  'react/jsx-runtime': 'jsxRuntime',
+  '@easy-editor/core': 'EasyEditorCore',
+}
+
+const plugins = [
+  nodeResolve({
+    extensions: ['.js', '.ts', '.jsx', '.tsx'],
+  }),
+  commonjs(),
+  json(),
+  postcss({
+    modules: {
+      generateScopedName: '[name]__[local]___[hash:base64:5]',
+    },
+    autoModules: true,
+    minimize: true,
+    inject: true,
+  }),
+  babel({
+    extensions: ['.js', '.ts', '.jsx', '.tsx'],
+    exclude: 'node_modules/**',
+    babelrc: false,
+    babelHelpers: 'bundled',
+    presets: [
+      ['@babel/preset-react', { runtime: 'automatic' }],
+      [
+        '@babel/preset-typescript',
+        {
+          allowDeclareFields: true,
+        },
+      ],
+    ],
+  }),
+  cleanup({
+    comments: ['some', /PURE/],
+    extensions: ['.js', '.ts'],
+  }),
+]
+
+export default [
+  /* ---------------------------------- 元数据构建 --------------------------------- */
+  // 元数据 ESM 构建（用于动态 import）
+  {
+    input: 'src/meta.ts',
+    output: [
+      {
+        file: 'dist/meta.esm.js',
+        format: 'esm',
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-image v${pkg.version} (meta, esm) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  // 元数据 UMD 构建（备用方案）
+  {
+    input: 'src/meta.ts',
+    output: [
+      {
+        file: 'dist/meta.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Meta`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-image v${pkg.version} (meta) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  // 元数据压缩版本（UMD，备用方案）
+  {
+    input: 'src/meta.ts',
+    output: [
+      {
+        file: 'dist/meta.min.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Meta`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-image v${pkg.version} (meta, minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+
+  /* ---------------------------------- 组件构建 ---------------------------------- */
+  // 组件 ESM 构建（用于动态 import）
+  {
+    input: 'src/component.tsx',
+    output: [
+      {
+        file: 'dist/component.esm.js',
+        format: 'esm',
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-image v${pkg.version} (component, esm) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  // 组件 UMD 构建（备用方案）
+  {
+    input: 'src/component.tsx',
+    output: [
+      {
+        file: 'dist/component.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Component`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-image v${pkg.version} (component) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  // 组件压缩版本（UMD，备用方案）
+  {
+    input: 'src/component.tsx',
+    output: [
+      {
+        file: 'dist/component.min.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Component`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-image v${pkg.version} (component, minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+
+  /* ---------------------------------- 完整构建 ---------------------------------- */
+  // UMD 构建（用于 CDN 和浏览器）
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.js',
+        format: 'umd',
+        name: GLOBAL_NAME,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-image v${pkg.version} */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  // ESM 构建（用于现代打包工具）
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.esm.js',
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins,
+    external,
+  },
+  // CJS 构建（用于 Node.js）
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.cjs',
+        format: 'cjs',
+        sourcemap: true,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  // 压缩版本（用于生产环境）
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.min.js',
+        format: 'umd',
+        name: GLOBAL_NAME,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-image v${pkg.version} (minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+]

package/src/component.module.css

@@ -0,0 +1,104 @@
+/**
+ * Audio Component Styles
+ * 音频组件样式
+ */
+
+.container {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  width: 100%;
+  height: 100%;
+  background: rgba(10, 10, 26, 0.95);
+  border: 1px solid rgba(26, 26, 62, 0.8);
+  border-radius: 8px;
+}
+
+.playButton {
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #00d4ff, #9b59b6);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: transform 0.2s ease;
+}
+
+.playButton:hover {
+  transform: scale(1.05);
+}
+
+.playIcon {
+  width: 0;
+  height: 0;
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+  border-left: 12px solid #fff;
+  margin-left: 3px;
+}
+
+.pauseIcon {
+  display: flex;
+  gap: 3px;
+}
+
+.pauseBar {
+  width: 4px;
+  height: 14px;
+  background: #fff;
+  border-radius: 2px;
+}
+
+.info {
+  flex: 1;
+  min-width: 0;
+}
+
+.title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #e6e6e6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.progressContainer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.progressBar {
+  flex: 1;
+  height: 4px;
+  background: rgba(26, 26, 62, 0.8);
+  border-radius: 2px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.progressFill {
+  height: 100%;
+  background: linear-gradient(90deg, #00d4ff, #9b59b6);
+  border-radius: 2px;
+  transition: width 0.1s linear;
+}
+
+.time {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.6);
+  font-family: "Courier New", Courier, monospace;
+  min-width: 80px;
+  text-align: right;
+}
+
+.nativeAudio {
+  width: 100%;
+}

package/src/component.tsx

@@ -0,0 +1,140 @@
+/**
+ * Audio Component
+ * 音频播放组件
+ */
+
+import { useState, useRef, useEffect, type CSSProperties, type Ref } from 'react'
+import styles from './component.module.css'
+
+export type AudioStyle = 'custom' | 'native'
+
+export interface AudioProps {
+  ref?: Ref<HTMLDivElement>
+  /** 音频地址 */
+  src?: string
+  /** 标题 */
+  title?: string
+  /** 自动播放 */
+  autoPlay?: boolean
+  /** 循环播放 */
+  loop?: boolean
+  /** 样式类型 */
+  audioStyle?: AudioStyle
+  /** 外部样式 */
+  style?: CSSProperties
+}
+
+const formatTime = (seconds: number): string => {
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+export const Audio: React.FC<AudioProps> = ({
+  ref,
+  src = '',
+  title = '音频文件',
+  autoPlay = false,
+  loop = false,
+  audioStyle = 'custom',
+  style: externalStyle,
+}) => {
+  const audioRef = useRef<HTMLAudioElement>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const [currentTime, setCurrentTime] = useState(0)
+  const [duration, setDuration] = useState(0)
+
+  useEffect(() => {
+    const audio = audioRef.current
+    if (!audio) {
+      return
+    }
+
+    const handleTimeUpdate = () => setCurrentTime(audio.currentTime)
+    const handleLoadedMetadata = () => setDuration(audio.duration)
+    const handleEnded = () => setIsPlaying(false)
+
+    audio.addEventListener('timeupdate', handleTimeUpdate)
+    audio.addEventListener('loadedmetadata', handleLoadedMetadata)
+    audio.addEventListener('ended', handleEnded)
+
+    return () => {
+      audio.removeEventListener('timeupdate', handleTimeUpdate)
+      audio.removeEventListener('loadedmetadata', handleLoadedMetadata)
+      audio.removeEventListener('ended', handleEnded)
+    }
+  }, [])
+
+  const togglePlay = () => {
+    if (audioRef.current) {
+      if (isPlaying) {
+        audioRef.current.pause()
+      } else {
+        audioRef.current.play()
+      }
+      setIsPlaying(!isPlaying)
+    }
+  }
+
+  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (audioRef.current && duration) {
+      const rect = e.currentTarget.getBoundingClientRect()
+      const percent = (e.clientX - rect.left) / rect.width
+      audioRef.current.currentTime = percent * duration
+    }
+  }
+
+  const progress = duration ? (currentTime / duration) * 100 : 0
+
+  // 原生样式
+  if (audioStyle === 'native') {
+    return (
+      <div className={styles.container} ref={ref} style={externalStyle}>
+        <audio autoPlay={autoPlay} className={styles.nativeAudio} controls loop={loop} ref={audioRef} src={src} />
+      </div>
+    )
+  }
+
+  // 自定义样式
+  return (
+    <div className={styles.container} ref={ref} style={externalStyle}>
+      <audio autoPlay={autoPlay} loop={loop} ref={audioRef} src={src} />
+
+      <button
+        aria-label={isPlaying ? 'Pause' : 'Play'}
+        className={styles.playButton}
+        onClick={togglePlay}
+        type='button'
+      >
+        {isPlaying ? (
+          <div className={styles.pauseIcon}>
+            <div className={styles.pauseBar} />
+            <div className={styles.pauseBar} />
+          </div>
+        ) : (
+          <div className={styles.playIcon} />
+        )}
+      </button>
+
+      <div className={styles.info}>
+        <div className={styles.title}>{title}</div>
+        <div className={styles.progressContainer}>
+          <button
+            aria-label='Seek to position'
+            className={styles.progressBar}
+            // @ts-expect-error
+            onClick={handleProgressClick}
+            type='button'
+          >
+            <div className={styles.progressFill} style={{ width: `${progress}%` }} />
+          </button>
+          <span className={styles.time}>
+            {formatTime(currentTime)} / {formatTime(duration || 0)}
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Audio