录音机

此示例演示用于从设备的麦克风录制音频的web应用程序的实现。 应用程序的整个周期如下所述。

1. 用户单击←→按钮开始录制
2. 录音期间:
   -按钮变成红色与动画
   -计时器正在运行
   -正在收集音频数据
3. 停止时:
   -音频
   文件形成-播放器和下载按钮出现
4. 下载创建文件"记录-{日期}。波"

下面提供了对音频记录器代码的详细分析。 代码从一个基本的HTML结构和css样式开始,以获得一个美丽的界面.:

``'html

关键要素:

• recordBtn -圆形记录按钮,
• downloadBtn -下载按钮（最初隐藏）,
• timer -显示录制时间,
• audioPlayer -播放录制音频的元素。

接下来是变量的初始化

``'javascript的
让mediaRecorder;
让audioChunks=[];
让audioBlob;
让audioUrl;
让开始时间;
让timerInterval;
让流;
让isRecording=false;

变量存储应用程序状态:

- `mediaRecorder` -用于记录媒体的对象,
- `audioChunks` -用于存储记录数据的阵列,
- `audioBlob`/`audioUrl` -最终音频,
- `timerInterval` -更新计时器,
- `stream` -来自麦克风的数据流。

之后，声明辅助函数。

``'javascript的
函数格式时间(秒){
    const mins=数学。地板（秒/60）。toString（）。启动(2,'0');
    const secs=数学。地板（秒％60）。toString（）。启动(2,'0');
    回来吧 `${mins}:${secs}`;
}

函数更新时间(){
    const经过=数学。地板（（日期。现在()-开始时间)/1000);
    时间安排。textContent=formatTime（经过）;
}

formatTime 将秒转换为"MM:SS"格式，以及 updateTimer 更新计时器显示。

接下来是录制启动功能。

``'javascript的
函数启动(){
导航器。mediaDevices。getUserMedia({音频:true})
.然后(函数){
流=s;
mediaRecorder=新MediaRecorder（流）;
audioChunks=[];

        mediaRecorder。ondataavailable=函数(e){
            如果（e.数据。尺寸>0){
                audioChunks。推送(e.数据);
            }
        };
        
        mediaRecorder。停止=函数{
            audioBlob=新Blob（audioChunks，{type：'audio/wav'}）;
            audioUrl=URL。createObjectURL（audioBlob）;
            audioPlayer。src=audioUrl;
            下载btn。类列表。删除("隐藏");
            陈述。textContent="录音保存！ 点击←再次录制";
        };
        
        mediaRecorder。开始(100);
        开始时间=日期。现在（）;
        timerInterval=setInterval（updateTimer，1000）;
        更新时间();
        isRecording=真;
        录录玫搂鲁拢潞recordBtn.类列表。添加('录音');
        录录玫搂鲁拢潞recordBtn.textContent="️";
        声明。textContent="录音。.. 点击️️停止";
    })
    .渔获(功能(err){
        控制台。错误（'错误访问麦克风：'，err）;
        声明。textContent="访问麦克风时出错";
    });

}

操作的逻辑如下所述。

1. 通过以下方式请求访问麦克风 `getUserMedia`
2. 创建 `MediaRecorder` 记录流
3. 设置处理程序:
   - `ondataavailable` -收集音频片段,
   - `onstop` -创建最终文件并显示下载按钮。
4. 启动计时器并更改界面

之后，实施记录停止。

``'javascript的
函数停止记录(){
    if(mediaRecorder&&mediaRecorder.州！=='不活跃'){
        mediaRecorder。停止();
        clearInterval（timerInterval）;
        小溪。getTracks（）。forEach（跟踪=>跟踪。停止());
        isRecording=错误;
        录录玫搂鲁拢潞recordBtn.类列表。删除("录音");
        录录玫搂鲁拢潞recordBtn.textContent="🎤";
    }
}

停止录制、计时器和释放麦克风资源。

并下载录音:

``'javascript的
函数下载(){
如果(听力){
const a=文档。创建元素('a');
a.href=audioUrl;
const timestamp=new Date()。toISOString（）。替换(/[:。]/g,'-');
a.下载= recording-${timestamp}.wav;
a.点击();
声明。textContent="下载开始。..";
}
}

为具有唯一名称的文件创建临时下载链接。

还有一个事件处理程序，允许录制按钮作为启动/停止开关工作，并且还可以将整个界面及其更新链接到音频文件录制事件。

``'javascript的
录录玫搂鲁拢潞recordBtn.addEventListener('单击',函数(){
    如果(isRecording){
        停止记录();
     其他{
        开始记录();
    }
});

下载btn。addEventListener('点击',下载);

现在让我们启动应用程序本身，看看它是如何工作的。

结论

此示例和工具本身可用于为DSP生成测试数据样本。