react-audio-mark-tool

一个功能强大的React音频标记组件，支持波形可视化、缩放、拖拽和标记功能。

功能特性

• 🎵 音频波形可视化 - 使用wavesurfer.js渲染美观的音频波形
• 📍 音频标记 - 在任意时间点添加自定义标记
• 🔍 缩放功能 - 支持鼠标滚轮缩放查看波形细节
• 🖱️ 拖拽定位 - 拖拽波形快速定位到不同时间段
• 🎨 主题切换 - 支持浅色和深色主题
• 📂 多种加载方式 - 支持本地文件拖拽、URL输入和编程加载
• ⌨️ 快捷键支持 - 空格键播放/暂停
• 🎯 精确播放头 - 实时显示播放位置

安装

npm install react-audio-mark-tool

或者使用 yarn：

yarn add react-audio-mark-tool

快速使用

import React, { useRef } from 'react';
import AudioMarkTool from 'react-audio-mark-tool';
import 'react-audio-mark-tool/dist/react-audio-mark-tool.css';

function App() {
  const audioMarkToolRef = useRef(null);

  const handleLoadAudio = () => {
    // 通过URL加载音频
    audioMarkToolRef.current.loadAudio('https://example.com/audio.mp3');
  };

  const handleAddMark = () => {
    // 添加标记
    audioMarkToolRef.current.addMark({ time: 10, label: '标记点' });
  };

  return (
    <div>
      <AudioMarkTool
        ref={audioMarkToolRef}
        updateMark={(marks) => console.log('标记更新:', marks)}
        onAudioInited={(duration) => console.log('音频时长:', duration)}
      />
      <button onClick={handleLoadAudio}>加载音频</button>
      <button onClick={handleAddMark}>添加标记</button>
    </div>
  );
}

export default App;

Props

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | dark | boolean | false | 是否启用深色主题 | | updateMark | function | - | 标记更新时的回调函数，参数为当前所有标记数组 | | onkeydown | function | - | 键盘按下事件回调 | | onkeyup | function | - | 键盘松开事件回调 | | onAudioInited | function | - | 音频初始化完成回调，参数为音频时长（秒） | | onDownloadProgress | function | - | 音频下载进度回调，参数为 { loaded, total } | | onError | function | - | 错误回调函数 | | onAudioChanged | function | - | 音频文件变化回调 | | initScreen | ReactNode | - | 自定义初始屏幕组件 | | loadingScreen | ReactNode | - | 自定义加载屏幕组件 | | errorScreen | ReactNode | - | 自定义错误屏幕组件 |

Ref 方法

通过 ref 可以调用以下方法：

loadAudio(audioSource)

加载音频文件

参数：

• audioSource: File 对象或字符串 URL

示例：

// 从文件加载
audioMarkToolRef.current.loadAudio(fileObject);

// 从URL加载
audioMarkToolRef.current.loadAudio('https://example.com/audio.mp3');

addMark(mark)

添加一个标记

参数：

• mark: 标记对象，包含 time（时间，秒）和 label（标签）

示例：

audioMarkToolRef.current.addMark({ 
  time: 12.5, 
  label: '重要片段' 
});

removeMark(index)

移除指定索引的标记

参数：

• index: 标记索引

示例：

audioMarkToolRef.current.removeMark(0); // 移除第一个标记

getMark()

获取当前所有标记

返回： 标记数组

示例：

const marks = audioMarkToolRef.current.getMark();
console.log(marks);

标记对象格式

每个标记对象包含以下属性：

{
  time: 12.5,    // 时间点（秒）
  label: '标记1'  // 标签文本
}

示例项目

项目包含一个完整的示例，位于 example 目录。运行示例：

cd example
npm install
npm run dev

依赖项

• React >= 16.8.0
• wavesurfer.js >= 7.0.0

License

MIT