子阳
4 months ago
5 changed files with 827 additions and 5 deletions
@ -0,0 +1,338 @@ |
|||||
|
import React, { useState, useRef, useEffect } from 'react'; |
||||
|
import { Button, Modal, message } from 'antd'; |
||||
|
import { AudioOutlined, CloseOutlined, CheckOutlined } from '@ant-design/icons'; |
||||
|
import './index.less'; |
||||
|
|
||||
|
interface AudioSegment { |
||||
|
blob: Blob; |
||||
|
duration: number; |
||||
|
} |
||||
|
|
||||
|
interface AudioRecorderProps { |
||||
|
maxDuration?: number; // 最大录音时长，默认60秒
|
||||
|
onFinish?: (filePath: string) => void; // 录音完成回调
|
||||
|
onCancel?: () => void; // 取消录音回调
|
||||
|
modalMode?: boolean; // 是否为弹框模式
|
||||
|
triggerButton?: React.ReactNode; // 弹框模式下的触发按钮
|
||||
|
} |
||||
|
|
||||
|
const AudioRecorder: React.FC<AudioRecorderProps> = ({ |
||||
|
maxDuration = 60, |
||||
|
onFinish, |
||||
|
onCancel, |
||||
|
modalMode = false, |
||||
|
triggerButton, |
||||
|
}) => { |
||||
|
const [isRecording, setIsRecording] = useState(false); |
||||
|
const [segments, setSegments] = useState<AudioSegment[]>([]); |
||||
|
const [currentDuration, setCurrentDuration] = useState(0); |
||||
|
const [totalDuration, setTotalDuration] = useState(0); |
||||
|
const [isModalVisible, setIsModalVisible] = useState(false); |
||||
|
const [permissionGranted, setPermissionGranted] = useState<boolean | null>(null); |
||||
|
|
||||
|
const mediaRecorderRef = useRef<MediaRecorder | null>(null); |
||||
|
const audioChunksRef = useRef<Blob[]>([]); |
||||
|
const startTimeRef = useRef<number>(0); |
||||
|
const timerRef = useRef<NodeJS.Timeout | null>(null); |
||||
|
const streamRef = useRef<MediaStream | null>(null); |
||||
|
|
||||
|
// 请求麦克风权限
|
||||
|
const requestMicrophonePermission = async () => { |
||||
|
try { |
||||
|
const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); |
||||
|
setPermissionGranted(true); |
||||
|
streamRef.current = stream; |
||||
|
return stream; |
||||
|
} catch (error) { |
||||
|
console.error('麦克风权限请求失败:', error); |
||||
|
setPermissionGranted(false); |
||||
|
showMessage('error', '麦克风权限被拒绝，请检查浏览器设置'); |
||||
|
return null; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 开始录音
|
||||
|
const startRecording = async () => { |
||||
|
if (isRecording) return; |
||||
|
|
||||
|
// 如果还没有权限，先请求权限
|
||||
|
if (permissionGranted === null) { |
||||
|
const stream = await requestMicrophonePermission(); |
||||
|
if (!stream) return; |
||||
|
} else if (!permissionGranted) { |
||||
|
showMessage('error', '麦克风权限被拒绝，请检查浏览器设置'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
setIsRecording(true); |
||||
|
audioChunksRef.current = []; |
||||
|
startTimeRef.current = Date.now(); |
||||
|
|
||||
|
try { |
||||
|
// 如果之前的stream已经关闭，重新请求
|
||||
|
let stream = streamRef.current; |
||||
|
if (!stream || stream.active === false) { |
||||
|
stream = await requestMicrophonePermission(); |
||||
|
if (!stream) return; |
||||
|
} |
||||
|
|
||||
|
const mediaRecorder = new MediaRecorder(stream, { |
||||
|
mimeType: 'audio/webm;codecs=opus', |
||||
|
}); |
||||
|
|
||||
|
mediaRecorder.ondataavailable = (event) => { |
||||
|
if (event.data.size > 0) { |
||||
|
audioChunksRef.current.push(event.data); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
mediaRecorder.start(100); // 每100ms收集一次数据
|
||||
|
mediaRecorderRef.current = mediaRecorder; |
||||
|
|
||||
|
// 启动定时器更新当前时长
|
||||
|
timerRef.current = setInterval(() => { |
||||
|
const duration = Math.floor((Date.now() - startTimeRef.current) / 1000); |
||||
|
setCurrentDuration(duration); |
||||
|
|
||||
|
// 检查是否超过最大时长
|
||||
|
if (duration >= maxDuration) { |
||||
|
stopRecording(); |
||||
|
showMessage('warning', `已达到最大录音时长${maxDuration}秒`); |
||||
|
} |
||||
|
}, 100); |
||||
|
} catch (error) { |
||||
|
console.error('开始录音失败:', error); |
||||
|
setIsRecording(false); |
||||
|
showMessage('error', '开始录音失败，请重试'); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 停止录音
|
||||
|
const stopRecording = () => { |
||||
|
if (!isRecording || !mediaRecorderRef.current) return; |
||||
|
|
||||
|
setIsRecording(false); |
||||
|
clearInterval(timerRef.current!); |
||||
|
|
||||
|
mediaRecorderRef.current.stop(); |
||||
|
|
||||
|
// 计算当前分段的时长
|
||||
|
const duration = Math.floor((Date.now() - startTimeRef.current) / 1000); |
||||
|
|
||||
|
// 保存当前分段
|
||||
|
mediaRecorderRef.current.onstop = () => { |
||||
|
const audioBlob = new Blob(audioChunksRef.current, { type: 'audio/webm' }); |
||||
|
const newSegment: AudioSegment = { blob: audioBlob, duration }; |
||||
|
setSegments((prev) => [...prev, newSegment]); |
||||
|
setTotalDuration((prev) => prev + duration); |
||||
|
setCurrentDuration(0); |
||||
|
}; |
||||
|
}; |
||||
|
|
||||
|
// 合并所有录音分段
|
||||
|
const mergeSegments = async () => { |
||||
|
if (segments.length === 0) { |
||||
|
showMessage('warning', '没有录音数据'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
try { |
||||
|
// 创建一个新的Blob，包含所有分段的数据
|
||||
|
const allBlobs = segments.map((segment) => segment.blob); |
||||
|
const mergedBlob = new Blob(allBlobs, { type: 'audio/webm' }); |
||||
|
|
||||
|
// 创建一个临时URL
|
||||
|
const url = URL.createObjectURL(mergedBlob); |
||||
|
|
||||
|
// 调用完成回调
|
||||
|
if (onFinish) { |
||||
|
onFinish(url); |
||||
|
} |
||||
|
|
||||
|
showMessage('success', '录音完成'); |
||||
|
resetRecorder(); |
||||
|
|
||||
|
// 如果是弹框模式，关闭弹框
|
||||
|
if (modalMode) { |
||||
|
setIsModalVisible(false); |
||||
|
} |
||||
|
} catch (error) { |
||||
|
console.error('合并录音分段失败:', error); |
||||
|
showMessage('error', '合并录音失败，请重试'); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 清空所有录音数据
|
||||
|
const clearSegments = () => { |
||||
|
resetRecorder(); |
||||
|
if (onCancel) { |
||||
|
onCancel(); |
||||
|
} |
||||
|
showMessage('info', '录音已取消'); |
||||
|
|
||||
|
// 如果是弹框模式，关闭弹框
|
||||
|
if (modalMode) { |
||||
|
setIsModalVisible(false); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
// 重置录音器状态
|
||||
|
const resetRecorder = () => { |
||||
|
setIsRecording(false); |
||||
|
setSegments([]); |
||||
|
setCurrentDuration(0); |
||||
|
setTotalDuration(0); |
||||
|
clearInterval(timerRef.current!); |
||||
|
|
||||
|
// 停止所有轨道
|
||||
|
if (streamRef.current) { |
||||
|
streamRef.current.getTracks().forEach((track) => track.stop()); |
||||
|
streamRef.current = null; |
||||
|
} |
||||
|
|
||||
|
mediaRecorderRef.current = null; |
||||
|
audioChunksRef.current = []; |
||||
|
setPermissionGranted(null); |
||||
|
}; |
||||
|
|
||||
|
// 显示提示消息
|
||||
|
const showMessage = (type: 'success' | 'error' | 'warning' | 'info', content: string) => { |
||||
|
message[type](content, 1); // 1秒后自动消失
|
||||
|
}; |
||||
|
|
||||
|
// 组件卸载时清理资源
|
||||
|
useEffect(() => { |
||||
|
return () => { |
||||
|
resetRecorder(); |
||||
|
}; |
||||
|
}, []); |
||||
|
|
||||
|
// 渲染录音按钮
|
||||
|
const renderRecordButton = () => { |
||||
|
return ( |
||||
|
<div |
||||
|
className={`audio-recorder-button ${isRecording ? 'recording' : ''}`} |
||||
|
onMouseDown={startRecording} |
||||
|
onMouseUp={stopRecording} |
||||
|
onMouseLeave={stopRecording} |
||||
|
onTouchStart={startRecording} |
||||
|
onTouchEnd={stopRecording} |
||||
|
> |
||||
|
<AudioOutlined /> |
||||
|
<span>{isRecording ? '松开停止' : '长按录音'}</span> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
// 渲染进度条
|
||||
|
const renderProgressBar = () => { |
||||
|
const currentProgress = isRecording ? (currentDuration / maxDuration) * 100 : 0; |
||||
|
|
||||
|
// 计算每个已录制分段的起始位置
|
||||
|
const segmentPositions = segments.reduce((acc, segment, index) => { |
||||
|
const previousTotalDuration = segments.slice(0, index).reduce((sum, s) => sum + s.duration, 0); |
||||
|
const startPosition = (previousTotalDuration / maxDuration) * 100; |
||||
|
const segmentProgress = (segment.duration / maxDuration) * 100; |
||||
|
acc.push({ startPosition, segmentProgress }); |
||||
|
return acc; |
||||
|
}, [] as { startPosition: number; segmentProgress: number }[]); |
||||
|
|
||||
|
// 计算当前正在录制的分段的起始位置
|
||||
|
const currentStartPosition = totalDuration > 0 ? (totalDuration / maxDuration) * 100 : 0; |
||||
|
|
||||
|
return ( |
||||
|
<div className="audio-recorder-progress"> |
||||
|
<div className="audio-recorder-progress-bar"> |
||||
|
{/* 已录制的分段 */} |
||||
|
{segmentPositions.map((position, index) => ( |
||||
|
<div |
||||
|
key={index} |
||||
|
className="audio-recorder-progress-segment" |
||||
|
style={{ |
||||
|
width: `${position.segmentProgress}%`, |
||||
|
left: `${position.startPosition}%`, |
||||
|
}} |
||||
|
/> |
||||
|
))} |
||||
|
{/* 当前正在录制的分段 */} |
||||
|
{isRecording && ( |
||||
|
<div |
||||
|
className="audio-recorder-progress-current" |
||||
|
style={{ |
||||
|
width: `${currentProgress}%`, |
||||
|
left: `${currentStartPosition}%`, |
||||
|
}} |
||||
|
/> |
||||
|
)} |
||||
|
</div> |
||||
|
<div className="audio-recorder-duration"> |
||||
|
<span>{totalDuration + currentDuration}秒</span> |
||||
|
<span>/</span> |
||||
|
<span>{maxDuration}秒</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
// 渲染操作按钮
|
||||
|
const renderActionButtons = () => { |
||||
|
const hasData = segments.length > 0 || isRecording; |
||||
|
|
||||
|
return ( |
||||
|
<div className="audio-recorder-actions"> |
||||
|
<Button |
||||
|
type="default" |
||||
|
icon={<CloseOutlined />} |
||||
|
onClick={clearSegments} |
||||
|
disabled={!hasData} |
||||
|
> |
||||
|
取消录音 |
||||
|
</Button> |
||||
|
<Button |
||||
|
type="primary" |
||||
|
icon={<CheckOutlined />} |
||||
|
onClick={mergeSegments} |
||||
|
disabled={!hasData} |
||||
|
> |
||||
|
完成录音 |
||||
|
</Button> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
// 渲染录音组件内容
|
||||
|
const renderRecorderContent = () => { |
||||
|
return ( |
||||
|
<div className="audio-recorder-container"> |
||||
|
<h3>录音组件</h3> |
||||
|
{renderRecordButton()} |
||||
|
{renderProgressBar()} |
||||
|
{renderActionButtons()} |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
// 如果是弹框模式，渲染弹框
|
||||
|
if (modalMode) { |
||||
|
return ( |
||||
|
<> |
||||
|
<Button type="primary" onClick={() => setIsModalVisible(true)}> |
||||
|
{triggerButton || '开始录音'} |
||||
|
</Button> |
||||
|
<Modal |
||||
|
title="录音" |
||||
|
visible={isModalVisible} |
||||
|
onCancel={() => setIsModalVisible(false)} |
||||
|
footer={null} |
||||
|
> |
||||
|
{renderRecorderContent()} |
||||
|
</Modal> |
||||
|
</> |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
// 否则，直接渲染组件
|
||||
|
return renderRecorderContent(); |
||||
|
}; |
||||
|
|
||||
|
export default AudioRecorder; |
||||
@ -0,0 +1,152 @@ |
|||||
|
import React, { useState } from 'react'; |
||||
|
import AudioRecorder from './AudioRecorder'; |
||||
|
import { Card, Tabs, Button, message } from 'antd'; |
||||
|
import { PlayCircleOutlined } from '@ant-design/icons'; |
||||
|
import './index.less'; |
||||
|
|
||||
|
const { TabPane } = Tabs; |
||||
|
|
||||
|
const Example: React.FC = () => { |
||||
|
const [recordedFile, setRecordedFile] = useState<string | null>(null); |
||||
|
const [modalRecordedFile, setModalRecordedFile] = useState<string | null>(null); |
||||
|
|
||||
|
// 处理录音完成
|
||||
|
const handleRecordFinish = (filePath: string) => { |
||||
|
setRecordedFile(filePath); |
||||
|
message.success('录音完成，已保存录音文件'); |
||||
|
}; |
||||
|
|
||||
|
// 处理录音取消
|
||||
|
const handleRecordCancel = () => { |
||||
|
setRecordedFile(null); |
||||
|
message.info('录音已取消'); |
||||
|
}; |
||||
|
|
||||
|
// 处理弹框模式录音完成
|
||||
|
const handleModalRecordFinish = (filePath: string) => { |
||||
|
setModalRecordedFile(filePath); |
||||
|
message.success('弹框模式录音完成，已保存录音文件'); |
||||
|
}; |
||||
|
|
||||
|
// 处理弹框模式录音取消
|
||||
|
const handleModalRecordCancel = () => { |
||||
|
setModalRecordedFile(null); |
||||
|
message.info('弹框模式录音已取消'); |
||||
|
}; |
||||
|
|
||||
|
// 播放录音
|
||||
|
const playRecording = (filePath: string | null) => { |
||||
|
if (!filePath) { |
||||
|
message.warning('没有录音文件可以播放'); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
try { |
||||
|
const audio = new Audio(filePath); |
||||
|
audio.play(); |
||||
|
message.info('开始播放录音'); |
||||
|
} catch (error) { |
||||
|
console.error('播放录音失败:', error); |
||||
|
message.error('播放录音失败，请重试'); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<div className="audio-recorder-example"> |
||||
|
<h2>录音组件使用示例</h2> |
||||
|
|
||||
|
<Tabs defaultActiveKey="1" className="example-tabs"> |
||||
|
{/* 直接嵌入模式 */} |
||||
|
<TabPane tab="直接嵌入模式" key="1"> |
||||
|
<Card title="录音组件（直接嵌入）" bordered={false} className="example-card"> |
||||
|
<AudioRecorder |
||||
|
maxDuration={60} // 最大录音时长，默认60秒
|
||||
|
onFinish={handleRecordFinish} |
||||
|
onCancel={handleRecordCancel} |
||||
|
modalMode={false} // 直接嵌入模式
|
||||
|
/> |
||||
|
|
||||
|
{/* 录音结果展示 */} |
||||
|
{recordedFile && ( |
||||
|
<div className="recording-result"> |
||||
|
<h4>录音结果</h4> |
||||
|
<Button |
||||
|
type="primary" |
||||
|
icon={<PlayCircleOutlined />} |
||||
|
onClick={() => playRecording(recordedFile)} |
||||
|
> |
||||
|
播放录音 |
||||
|
</Button> |
||||
|
<p>录音文件路径: {recordedFile}</p> |
||||
|
</div> |
||||
|
)} |
||||
|
</Card> |
||||
|
</TabPane> |
||||
|
|
||||
|
{/* 弹框模式 */} |
||||
|
<TabPane tab="弹框模式" key="2"> |
||||
|
<Card title="录音组件（弹框模式）" bordered={false} className="example-card"> |
||||
|
<AudioRecorder |
||||
|
maxDuration={60} |
||||
|
onFinish={handleModalRecordFinish} |
||||
|
onCancel={handleModalRecordCancel} |
||||
|
modalMode={true} // 弹框模式
|
||||
|
triggerButton="打开录音弹框" // 自定义触发按钮文本
|
||||
|
/> |
||||
|
|
||||
|
{/* 弹框模式录音结果展示 */} |
||||
|
{modalRecordedFile && ( |
||||
|
<div className="recording-result"> |
||||
|
<h4>弹框模式录音结果</h4> |
||||
|
<Button |
||||
|
type="primary" |
||||
|
icon={<PlayCircleOutlined />} |
||||
|
onClick={() => playRecording(modalRecordedFile)} |
||||
|
> |
||||
|
播放录音 |
||||
|
</Button> |
||||
|
<p>录音文件路径: {modalRecordedFile}</p> |
||||
|
</div> |
||||
|
)} |
||||
|
</Card> |
||||
|
</TabPane> |
||||
|
|
||||
|
{/* 自定义配置模式 */} |
||||
|
<TabPane tab="自定义配置模式" key="3"> |
||||
|
<Card title="录音组件（自定义配置）" bordered={false} className="example-card"> |
||||
|
<AudioRecorder |
||||
|
maxDuration={30} // 自定义最大录音时长为30秒
|
||||
|
onFinish={(filePath) => { |
||||
|
setRecordedFile(filePath); |
||||
|
message.success('自定义配置模式录音完成'); |
||||
|
}} |
||||
|
onCancel={() => { |
||||
|
setRecordedFile(null); |
||||
|
message.info('自定义配置模式录音已取消'); |
||||
|
}} |
||||
|
modalMode={false} |
||||
|
/> |
||||
|
|
||||
|
{/* 自定义配置模式录音结果展示 */} |
||||
|
{recordedFile && ( |
||||
|
<div className="recording-result"> |
||||
|
<h4>自定义配置模式录音结果</h4> |
||||
|
<Button |
||||
|
type="primary" |
||||
|
icon={<PlayCircleOutlined />} |
||||
|
onClick={() => playRecording(recordedFile)} |
||||
|
> |
||||
|
播放录音 |
||||
|
</Button> |
||||
|
<p>录音文件路径: {recordedFile}</p> |
||||
|
<p>自定义最大录音时长: 30秒</p> |
||||
|
</div> |
||||
|
)} |
||||
|
</Card> |
||||
|
</TabPane> |
||||
|
</Tabs> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default Example; |
||||
@ -0,0 +1,178 @@ |
|||||
|
# 录音组件 (AudioRecorder) |
||||
|
|
||||
|
一个功能完善、界面美观的前端录音组件，支持长按录音、分段录制、进度可视化等功能，适配移动端和桌面端。 |
||||
|
|
||||
|
## 功能特性 |
||||
|
|
||||
|
### 1. 录音交互 |
||||
|
- 长按录音按钮开始录音 |
||||
|
- 松手自动暂停录音 |
||||
|
- 支持移动端触摸事件 |
||||
|
|
||||
|
### 2. 分段录制 |
||||
|
- 支持多次长按-松手的分段录音 |
||||
|
- 自动保存每段录音数据 |
||||
|
- 以进度条长度分割的方式显示分段 |
||||
|
|
||||
|
### 3. 进度可视化 |
||||
|
- 录音时显示实时进度条 |
||||
|
- 同步展示当前录音时长和最大录音时长 |
||||
|
- 进度条随录音时长线性增长 |
||||
|
|
||||
|
### 4. 配置灵活性 |
||||
|
- 支持自定义最大录音时长（默认60秒） |
||||
|
- 超出最大时长自动停止录音并提示 |
||||
|
|
||||
|
### 5. 操作控件功能 |
||||
|
- 取消录音：清空所有分段数据 |
||||
|
- 完成录音：合并所有分段，返回完整录音文件路径 |
||||
|
- 按钮状态随录音状态动态禁用/启用 |
||||
|
|
||||
|
### 6. 提示消息 |
||||
|
- 录音完成、取消、权限拒绝时显示浮动提示 |
||||
|
- 提示1秒后自动消失 |
||||
|
|
||||
|
### 7. 使用模式 |
||||
|
- 直接嵌入模式：可直接嵌入页面作为独立组件使用 |
||||
|
- 弹框模式：支持通过触发按钮打开弹框 |
||||
|
|
||||
|
## 技术实现 |
||||
|
|
||||
|
- **React + TypeScript**：组件化开发，类型安全 |
||||
|
- **MediaRecorder API**：浏览器原生录音API |
||||
|
- **Ant Design**：UI组件库，提供按钮、弹框等基础组件 |
||||
|
- **Less**：CSS预处理器，实现组件样式 |
||||
|
|
||||
|
## 安装和使用 |
||||
|
|
||||
|
### 1. 直接使用组件 |
||||
|
|
||||
|
```tsx |
||||
|
import React from 'react'; |
||||
|
import AudioRecorder from './AudioRecorder'; |
||||
|
|
||||
|
const App: React.FC = () => { |
||||
|
// 处理录音完成 |
||||
|
const handleRecordFinish = (filePath: string) => { |
||||
|
console.log('录音完成，文件路径:', filePath); |
||||
|
// 可以在这里处理录音文件，比如上传到服务器 |
||||
|
}; |
||||
|
|
||||
|
// 处理录音取消 |
||||
|
const handleRecordCancel = () => { |
||||
|
console.log('录音已取消'); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<div> |
||||
|
<AudioRecorder |
||||
|
maxDuration={60} // 最大录音时长，默认60秒 |
||||
|
onFinish={handleRecordFinish} |
||||
|
onCancel={handleRecordCancel} |
||||
|
modalMode={false} // 直接嵌入模式 |
||||
|
/> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default App; |
||||
|
``` |
||||
|
|
||||
|
### 2. 弹框模式使用 |
||||
|
|
||||
|
```tsx |
||||
|
import React from 'react'; |
||||
|
import AudioRecorder from './AudioRecorder'; |
||||
|
|
||||
|
const App: React.FC = () => { |
||||
|
// 处理录音完成 |
||||
|
const handleRecordFinish = (filePath: string) => { |
||||
|
console.log('弹框模式录音完成，文件路径:', filePath); |
||||
|
}; |
||||
|
|
||||
|
// 处理录音取消 |
||||
|
const handleRecordCancel = () => { |
||||
|
console.log('弹框模式录音已取消'); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<div> |
||||
|
<AudioRecorder |
||||
|
maxDuration={60} |
||||
|
onFinish={handleRecordFinish} |
||||
|
onCancel={handleRecordCancel} |
||||
|
modalMode={true} // 弹框模式 |
||||
|
triggerButton="开始录音" // 自定义触发按钮文本 |
||||
|
/> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default App; |
||||
|
``` |
||||
|
|
||||
|
## API 文档 |
||||
|
|
||||
|
### AudioRecorder Props |
||||
|
|
||||
|
| 参数名 | 类型 | 默认值 | 描述 | |
||||
|
|--------|------|--------|------| |
||||
|
| maxDuration | number | 60 | 最大录音时长（秒） | |
||||
|
| onFinish | (filePath: string) => void | - | 录音完成回调，返回录音文件路径 | |
||||
|
| onCancel | () => void | - | 取消录音回调 | |
||||
|
| modalMode | boolean | false | 是否为弹框模式 | |
||||
|
| triggerButton | React.ReactNode | "开始录音" | 弹框模式下的触发按钮内容 | |
||||
|
|
||||
|
## 组件结构 |
||||
|
|
||||
|
``` |
||||
|
AudioRecorder06/ |
||||
|
├── AudioRecorder.tsx # 录音组件核心代码 |
||||
|
├── index.less # 组件样式文件 |
||||
|
├── Example.tsx # 组件使用示例 |
||||
|
└── README.md # 组件文档说明 |
||||
|
``` |
||||
|
|
||||
|
## 浏览器兼容性 |
||||
|
|
||||
|
- Chrome 66+ |
||||
|
- Firefox 65+ |
||||
|
- Safari 14+ |
||||
|
- Edge 79+ |
||||
|
|
||||
|
## 注意事项 |
||||
|
|
||||
|
1. **麦克风权限**：组件需要用户授权使用麦克风，请确保浏览器支持并正确配置麦克风权限。 |
||||
|
|
||||
|
2. **录音格式**：组件使用 `audio/webm;codecs=opus` 格式录制音频，这是现代浏览器支持的高效音频格式。 |
||||
|
|
||||
|
3. **临时文件**：录音完成后返回的是临时URL，浏览器会在页面刷新或关闭后释放该URL。如果需要长期保存录音文件，建议将其上传到服务器。 |
||||
|
|
||||
|
4. **移动端适配**：组件已针对移动端进行适配，支持触摸事件，但在某些移动浏览器中可能存在兼容性问题。 |
||||
|
|
||||
|
## 二次开发 |
||||
|
|
||||
|
### 1. 修改样式 |
||||
|
|
||||
|
组件样式使用Less编写，位于 `index.less` 文件中。您可以根据需要修改样式变量或类名。 |
||||
|
|
||||
|
### 2. 扩展功能 |
||||
|
|
||||
|
如果需要扩展组件功能，可以在 `AudioRecorder.tsx` 文件中修改或添加代码。例如： |
||||
|
|
||||
|
- 添加录音质量设置 |
||||
|
- 添加录音格式选择 |
||||
|
- 添加录音波形可视化 |
||||
|
- 添加录音上传功能 |
||||
|
|
||||
|
### 3. 自定义提示消息 |
||||
|
|
||||
|
组件使用Ant Design的 `message` 组件显示提示消息。如果需要自定义提示消息的样式或行为，可以修改 `showMessage` 方法。 |
||||
|
|
||||
|
## 测试 |
||||
|
|
||||
|
组件提供了完整的使用示例，位于 `Example.tsx` 文件中。您可以运行示例代码测试组件的各项功能。 |
||||
|
|
||||
|
## 许可证 |
||||
|
|
||||
|
MIT License |
||||
@ -0,0 +1,158 @@ |
|||||
|
.audio-recorder-container { |
||||
|
max-width: 600px; |
||||
|
margin: 0 auto; |
||||
|
padding: 24px; |
||||
|
background: #fff; |
||||
|
border-radius: 8px; |
||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
||||
|
|
||||
|
h3 { |
||||
|
margin: 0 0 24px 0; |
||||
|
font-size: 18px; |
||||
|
font-weight: 600; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.audio-recorder-button { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 120px; |
||||
|
height: 120px; |
||||
|
margin: 0 auto 24px; |
||||
|
background: #1890ff; |
||||
|
border: none; |
||||
|
border-radius: 50%; |
||||
|
color: #fff; |
||||
|
font-size: 16px; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s ease; |
||||
|
user-select: none; |
||||
|
|
||||
|
&:hover { |
||||
|
background: #40a9ff; |
||||
|
transform: scale(1.05); |
||||
|
} |
||||
|
|
||||
|
&:active { |
||||
|
transform: scale(0.95); |
||||
|
} |
||||
|
|
||||
|
&.recording { |
||||
|
background: #ff4d4f; |
||||
|
animation: pulse 1.5s infinite; |
||||
|
|
||||
|
&:hover { |
||||
|
background: #ff7875; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.anticon { |
||||
|
font-size: 32px; |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@keyframes pulse { |
||||
|
0% { |
||||
|
box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.7); |
||||
|
} |
||||
|
70% { |
||||
|
box-shadow: 0 0 0 10px rgba(255, 77, 79, 0); |
||||
|
} |
||||
|
100% { |
||||
|
box-shadow: 0 0 0 0 rgba(255, 77, 79, 0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.audio-recorder-progress { |
||||
|
margin-bottom: 24px; |
||||
|
} |
||||
|
|
||||
|
.audio-recorder-progress-bar { |
||||
|
position: relative; |
||||
|
height: 8px; |
||||
|
background: #f0f0f0; |
||||
|
border-radius: 4px; |
||||
|
overflow: hidden; |
||||
|
margin-bottom: 8px; |
||||
|
} |
||||
|
|
||||
|
.audio-recorder-progress-segment { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
height: 100%; |
||||
|
background: #1890ff; |
||||
|
transition: width 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.audio-recorder-progress-current { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
height: 100%; |
||||
|
background: #ff4d4f; |
||||
|
transition: width 0.1s ease; |
||||
|
} |
||||
|
|
||||
|
.audio-recorder-duration { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
|
||||
|
span { |
||||
|
margin: 0 4px; |
||||
|
} |
||||
|
|
||||
|
span:first-child { |
||||
|
color: #1890ff; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.audio-recorder-actions { |
||||
|
display: flex; |
||||
|
gap: 16px; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.ant-btn { |
||||
|
min-width: 120px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/* 移动端适配 */ |
||||
|
@media (max-width: 768px) { |
||||
|
.audio-recorder-container { |
||||
|
padding: 16px; |
||||
|
} |
||||
|
|
||||
|
.audio-recorder-button { |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
|
||||
|
.anticon { |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
|
||||
|
span { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.audio-recorder-actions { |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.ant-btn { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue