做h5单页的网站,网络推广建立站点如何建立,东莞公司注册官网,在潮州哪里找做网站的HTML JavaScript 实现网页录制音频与下载 HTML JavaScript 实现网页录制音频与下载简介getUserMediaMediaRecorder获取和处理音频流实现音频的录制和播放音频效果的处理实时语音通话的应用兼容性和 Latency 问题 项目代码运行实例参考源码下载 HTML JavaScript 实现网页录制… HTML JavaScript 实现网页录制音频与下载 HTML JavaScript 实现网页录制音频与下载简介getUserMediaMediaRecorder获取和处理音频流实现音频的录制和播放音频效果的处理实时语音通话的应用兼容性和 Latency 问题 项目代码运行实例参考源码下载 HTML JavaScript 实现网页录制音频与下载
简介
在这个数字化的时代网页端的音频处理能力已经成为一个非常热门的需求。本文将详细介绍如何利用 getUserMedia 和 MediaRecorder 这两个强大的 API实现网页端音频的录制、处理和播放等功能。
getUserMedia
getUserMedia 和 MediaRecorder 是 HTML5 中两个非常重要的 API用于访问设备媒体输入流并对其进行操作。
getUserMedia 允许网页端访问用户设备的媒体输入设备比如摄像头和麦克风。通过该 API在获得用户授权后我们可以获取这些媒体流的数据并用于各种网页应用场景中。
典型的使用方式如下
// 请求获取音频流
navigator.mediaDevices.getUserMedia({audio: true
})
.then(stream {// 在此处理音频流
})getUserMedia 接受一个 constraints 对象作为参数,通过设置配置来请求获取指定的媒体类型常见的配置有:
audioBoolean 值是否获取音频输入。videoBoolean 值是否获取视频输入。以及更详细的各种音视频参数设置。
MediaRecorder
MediaRecorder API 可以获取由 getUserMedia 生成的媒体流并对其进行编码和封装输出可供播放和传输的媒体文件。
典型的用法如下
// 获取媒体流
const stream await navigator.mediaDevices.getUserMedia({ audio: true })// 创建 MediaRecorder 实例
const mediaRecorder new MediaRecorder(stream);// 注册数据可用事件,以获取编码后的媒体数据块
mediaRecorder.ondataavailable event {audioChunks.push(event.data);
}// 开始录制
mediaRecorder.start();// 录制完成后停止
mediaRecorder.stop(); // 将录制的数据组装成 Blob
const blob new Blob(audioChunks, {type: audio/mp3
});简单来说getUserMedia 获取输入流MediaRecorder 对流进行编码和处理两者结合就可以实现强大的音视频处理能力。
获取和处理音频流
了解了基本 API 使用方法后我们来看看如何获取和处理音频流。
首先需要调用 getUserMedia 来获取音频流典型的配置是
const stream await navigator.mediaDevices.getUserMedia({audio: {channelCount: 2, sampleRate: 44100,sampleSize: 16,echoCancellation: true }
});我们可以指定声道数、采样率、采样大小等参数来获取音频流。 PS这似乎不管用。 使用 navigator.mediaDevices.enumerateDevices() 可以获得所有可用的媒体设备列表这样我们就可以提供设备选择功能给用户而不仅仅是默认设备。
举例来说如果我们想要让用户选择要使用的录音设备
// 1. 获取录音设备列表
const audioDevices await navigator.mediaDevices.enumerateDevices();const mics audioDevices.filter(d d.kind audioinput);// 2. 提供设备选择 UI 供用户选择
const selectedMic mics[0]; // 3. 根据选择配置进行获取流
const constraints {audio: {deviceId: selectedMic.deviceId}
};const stream await navigator.mediaDevices.getUserMedia(constraints);这样我们就可以获得用户选择的设备录音了。
获得原始音频流后我们可以利用 Web Audio API 对其进行处理。
例如添加回声效果
// 创建音频环境
const audioContext new AudioContext();// 创建流源节点
const source audioContext.createMediaStreamSource(stream);// 创建回声效果节点
const echo audioContext.createConvolver();// 连接处理链
source.connect(echo);
echo.connect(audioContext.destination);// 加载回声冲击响应并应用
const impulseResponse await fetch(impulse.wav);
const buffer await impulseResponse.arrayBuffer();
const audioBuffer await audioContext.decodeAudioData(buffer);echo.buffer audioBuffer;通过这样的音频处理链我们就可以在录音时添加回声、混响等音效了。
实现音频的录制和播放
录制音频的步骤
调用 getUserMedia 获取音频流。创建 MediaRecorder 实例,传入音频流。注册数据可用回调,以获取编码后的音频数据块。调用 recorder.start() 开始录制。录制完成后调用 recorder.stop()。
代码
let recorder;
let audioChunks [];// 开始录音 handler
const startRecording async () {const stream await navigator.mediaDevices.getUserMedia({audio: true});recorder new MediaRecorder(stream);recorder.ondataavailable event {audioChunks.push(event.data);};recorder.start();} // 停止录音 handler
const stopRecording () {if(recorder.state recording) {recorder.stop();}
}录音完成后我们可以将音频数据组装成一个 Blob 对象然后赋值给一个 audio 元素的 src 属性进行播放。
代码
// 录音停止后
const blob new Blob(audioChunks, { type: audio/ogg }); const audioURL URL.createObjectURL(blob);const player document.querySelector(audio);
player.src audioURL;// 调用播放
player.play();这样就可以播放刚刚录制的音频了。
后续也可以添加下载功能等。
音频效果的处理
利用 Web Audio API我们可以添加各种音频效果进行音频处理。
例如添加回声效果
const audioContext new AudioContext();// 原始音频节点
const source audioContext.createMediaStreamSource(stream);// 回声效果节点
const echo audioContext.createConvolver();// 连接处理链
source.connect(echo);
echo.connect(audioContext.destination);// 加载冲击响应作为回声效果
const impulseResponse await fetch(impulse.wav);
const arrayBuffer await impulseResponse.arrayBuffer();
const audioBuffer await audioContext.decodeAudioData(arrayBuffer);echo.buffer audioBuffer;这样在录制时音频流就会经过回声效果处理了。
此外我们还可以添加混响、滤波、均衡器、压缩等多种音频效果使得网页端也能处理出专业级的音频作品。
实时语音通话的应用
利用 getUserMedia 和 WebRTC 技术我们还可以在网页端实现实时的点对点语音通话。
简述流程如下
通过 getUserMedia 获取本地音视频流。创建 RTCPeerConnection 实例。将本地流添加到连接上。交换 ICE 候选信息,建立连接。当检测到连接后,渲染远端用户的音视频流。
这样就可以实现类似 Skype 的网页端语音通话功能了。
代码
// 1. 获取本地流
const localStream await navigator.mediaDevices.getUserMedia({audio: true,video: true
});// 2. 创建连接对象
const pc new RTCPeerConnection();// 3. 添加本地流
localStream.getTracks().forEach(track pc.addTrack(track, localStream)); // 4. 交换 ICE 等信令,处理 ONADDSTREAM 等事件// ...// 5. 收到远端流,渲染到页面
pc.ontrack event {remoteVideo.srcObject event.streams[0];
}获取本地输入流后经过编码和传输就可以实现语音聊天了。
兼容性和 Latency 问题
尽管 getUserMedia 和 MediaRecorder 在现代浏览器中已经得到了较好的支持但由于不同厂商和版本实现存在差异在实际应用中还是需要注意一些兼容性问题
检测 API 支持情况提供降级方案。注意不同浏览器对 Codec、采样率等参数支持的差异。封装浏览器差异提供统一的 API。
此外录音和播放也存在一定的延迟问题。我们需要针对 Latency 进行优化比如使用更小的 buffer 大小压缩数据包大小等方法。
项目代码
record.html
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleRecord Page/titlelink relstylesheet typetext/css hrefcss/record.css/headbodydiv classappaudio controls classaudio-player/audiobutton classrecord-btn录音/buttona iddownload downloadrecord.aac/a/div/bodyscript srcjs/record.js/script/htmlrecord.css
.app {display: flex;justify-content: center;align-items: center;
}.record-btn {margin: 0 10px;
}record.js
const recordBtn document.querySelector(.record-btn)
const player document.querySelector(.audio-player)
const download document.querySelector(#download)
if (navigator.mediaDevices.getUserMedia) {let audioChunks []// 约束属性const constraints {// 音频约束audio: {sampleRate: 16000, // 采样率sampleSize: 16, // 每个采样点大小的位数channelCount: 1, // 通道数volume: 1, // 从 0静音到 1最大音量取值被用作每个样本值的乘数echoCancellation: true, // 开启回音消除noiseSuppression: true, // 开启降噪功能},// 视频约束video: false}// 请求获取音频流navigator.mediaDevices.getUserMedia(constraints).catch(err serverLog(ERROR mediaDevices.getUserMedia: ${err})).then(stream {// 在此处理音频流// 创建 MediaRecorder 实例const mediaRecorder new MediaRecorder(stream)// 点击按钮recordBtn.onclick () {if (mediaRecorder.state recording) {// 录制完成后停止mediaRecorder.stop()recordBtn.textContent 录音结束}else {// 开始录制mediaRecorder.start()recordBtn.textContent 录音中...}}mediaRecorder.ondataavailable e {audioChunks.push(e.data)}// 结束事件mediaRecorder.onstop e {// 将录制的数据组装成 Blobbinary large object 对象一个不可修改的存储二进制数据的容器const blob new Blob(audioChunks, { type: audio/aac })audioChunks []const audioURL window.URL.createObjectURL(blob)// 赋值给一个 audio 元素的 src 属性进行播放player.src audioURL// 添加下载功能download.innerHTML 下载download.href audioURL}},() {console.error(授权失败);});
} else {console.error(该浏览器不支持 getUserMedia);
}运行实例
打开 record.html首先获取麦克风权限 点击“允许”。 页面有一个 audio-player 和一个 buttom。
点击“录音”按钮就开始录音了。
再点一次按钮停止录音数据传回给 audio-player可以在网页上播放录音。 点击“下载”可以下载录制的音频。 PS音频文件名称设置为 record.aac文件格式为 WebM音频格式为 opus单声道采样率 48kHz位深 32bit。 参考
Blob 的所有 Type 类型getUserMedia() 音频约束
源码下载
CSDNWeb Record.zip
GitHubWeb-Record
