js实现录音进度条回放
实现录音进度条回放
使用JavaScript实现录音进度条回放功能，可以通过MediaRecorder API进行录音，并结合<audio>元素和<progress>或自定义进度条控件实现回放功能。
录音功能实现
通过navigator.mediaDevices.getUserMedia获取麦克风权限，创建MediaRecorder实例录制音频。
let mediaRecorder;
let audioChunks = [];
async function startRecording() {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.ondataavailable = (event) => {
audioChunks.push(event.data);
};
mediaRecorder.onstop = () => {
const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
const audioUrl = URL.createObjectURL(audioBlob);
const audioElement = document.getElementById('audioPlayer');
audioElement.src = audioUrl;
};
mediaRecorder.start();
}进度条同步
通过监听<audio>元素的timeupdate事件更新进度条。
const audioElement = document.getElementById('audioPlayer');
const progressBar = document.getElementById('progressBar');
audioElement.addEventListener('timeupdate', () => {
const currentTime = audioElement.currentTime;
const duration = audioElement.duration;
const progressPercent = (currentTime / duration) * 100;
progressBar.value = progressPercent;
});自定义进度条交互
允许用户点击进度条跳转到指定时间点。
progressBar.addEventListener('click', (event) => {
const rect = progressBar.getBoundingClientRect();
const clickPosition = (event.clientX - rect.left) / rect.width;
const seekTime = clickPosition * audioElement.duration;
audioElement.currentTime = seekTime;
});完整HTML结构
<button id="startButton">开始录音</button>
<button id="stopButton">停止录音</button>
<audio id="audioPlayer" controls></audio>
<progress id="progressBar" value="0" max="100"></progress>
<script>
// 上述JavaScript代码
</script>优化与扩展
- 实时波形显示：使用
AudioContext和AnalyserNode绘制实时波形。 - 分段回放：记录时间戳并允许跳转到特定段落。
- 样式美化：使用CSS自定义进度条外观，例如添加颜色渐变或动画效果。
通过上述方法，可以实现基本的录音进度条回放功能，并根据需求进一步扩展。
