微信录音
1、引入sdk
2、录音操作
浏览器录音
参考文献：前端H5实现调用麦克风，录音功能_h5 录音_Darker丨峰神的博客-CSDN博客
function record() {
window.navigator.mediaDevices.getUserMedia({
audio: {
sampleRate: 44100, // 采样率
channelCount: 2, // 声道
volume: 2.0 // 音量
}
}).then(mediaStream => {
console.log(mediaStream);
window.mediaStream = mediaStream
// beginRecord(window.mediaStream);
}).catch(err => {
// 如果用户电脑没有麦克风设备或者用户拒绝了，或者连接出问题了等
// 这里都会抛异常，并且通过err.name可以知道是哪种类型的错误
console.error(err);
});
}
function beginRecord(mediaStream) {
let audioContext = new (window.AudioContext || window.webkitAudioContext);
let mediaNode = audioContext.createMediaStreamSource(mediaStream);
console.log(mediaNode)
window.mediaNode = mediaNode
// 这里connect之后就会自动播放了
// mediaNode.connect(audioContext.destination); //直接把录的音直接播放出来
// 创建一个jsNode
let jsNode = createJSNode(audioContext);
window.jsNode = jsNode
// 需要连到扬声器消费掉outputBuffer，process回调才能触发
// 并且由于不给outputBuffer设置内容，所以扬声器不会播放出声音
jsNode.connect(audioContext.destination);
jsNode.onaudioprocess = onAudioProcess;
// 把mediaNode连接到jsNode
mediaNode.connect(jsNode);
}
function createJSNode(audioContext) {
const BUFFER_SIZE = 4096; //4096
const INPUT_CHANNEL_COUNT = 2;
const OUTPUT_CHANNEL_COUNT = 2;
// createJavaScriptNode已被废弃
let creator = audioContext.createScriptProcessor || audioContext.createJavaScriptNode;
creator = creator.bind(audioContext);
return creator(BUFFER_SIZE,
INPUT_CHANNEL_COUNT, OUTPUT_CHANNEL_COUNT);
}
let leftDataList = [],
rightDataList = [];
function onAudioProcess(event) {
// console.log(event.inputBuffer);
let audioBuffer = event.inputBuffer;
let leftChannelData = audioBuffer.getChannelData(0),
rightChannelData = audioBuffer.getChannelData(1);
// console.log(leftChannelData, rightChannelData);
// 需要克隆一下
leftDataList.push(leftChannelData.slice(0));
rightDataList.push(rightChannelData.slice(0));
}
function bofangRecord() {
// 播放录音
let leftData = mergeArray(leftDataList),
rightData = mergeArray(rightDataList);
let allData = interleaveLeftAndRight(leftData, rightData);
let wavBuffer = createWavFile(allData);
playRecord(wavBuffer);
}
function playRecord(arrayBuffer) {
let blob = new Blob([new Uint8Array(arrayBuffer)]);
let blobUrl = URL.createObjectURL(blob);
document.querySelector('.audio-node').src = blobUrl;
}
function stopRecord() {
// 停止录音
window.mediaNode.disconnect();
window.jsNode.disconnect();
console.log("已停止录音")
// console.log(leftDataList, rightDataList);
}
function recordClose() {
// 停止语音
window.mediaStream.getAudioTracks()[0].stop();
console.log("已停止语音")
}
function mergeArray(list) {
let length = list.length * list[0].length;
let data = new Float32Array(length),
offset = 0;
for (let i = 0; i < list.length; i++) {
data.set(list[i], offset);
offset += list[i].length;
}
return data;
}
function interleaveLeftAndRight(left, right) {
// 交叉合并左右声道的数据
let totalLength = left.length + right.length;
let data = new Float32Array(totalLength);
for (let i = 0; i < left.length; i++) {
let k = i * 2;
data[k] = left[i];
data[k + 1] = right[i];
}
return data;
}
function createWavFile(audioData) {
const WAV_HEAD_SIZE = 44;
let buffer = new ArrayBuffer(audioData.length * 2 + WAV_HEAD_SIZE),
// 需要用一个view来操控buffer
view = new DataView(buffer);
// 写入wav头部信息
// RIFF chunk descriptor/identifier
writeUTFBytes(view, 0, 'RIFF');
// RIFF chunk length
view.setUint32(4, 44 + audioData.length * 2, true);
// RIFF type
writeUTFBytes(view, 8, 'WAVE');
// format chunk identifier
// FMT sub-chunk
writeUTFBytes(view, 12, 'fmt ');
// format chunk length
view.setUint32(16, 16, true);
// sample format (raw)
view.setUint16(20, 1, true);
// stereo (2 channels)
view.setUint16(22, 2, true);
// sample rate
view.setUint32(24, 44100, true);
// byte rate (sample rate * block align)
view.setUint32(28, 44100 * 2, true);
// block align (channel count * bytes per sample)
view.setUint16(32, 2 * 2, true);
// bits per sample
view.setUint16(34, 16, true);
// data sub-chunk
// data chunk identifier
writeUTFBytes(view, 36, 'data');
// data chunk length
view.setUint32(40, audioData.length * 2, true);
// 写入wav头部，代码同上
// 写入PCM数据
let length = audioData.length;
let index = 44;
let volume = 1;
for (let i = 0; i < length; i++) {
view.setInt16(index, audioData[i] * (0x7FFF * volume), true);
index += 2;
}
return buffer;
}
function writeUTFBytes(view, offset, string) {
var lng = string.length;
for (var i = 0; i < lng; i++) {
view.setUint8(offset + i, string.charCodeAt(i));
}
}
-
播放录音
1.使用audio标签
<audio src='audio_file.mp3'></audio>
2.使用audio对象（uni-app）
3.浏览器对象（js）
var mp3 = null;
function audioplay(url){
console.log("播放录音---"+url);
if(mp3 != null){
mp3.pause();
mp3 = new Audio(url);
mp3.play();
}else{
mp3 = new Audio(url);
mp3.play(); //播放 mp3这个音频对象
}
}
