JS实时获取录音数据并播放
一 原生拉起录音授权，实时获取音频的返回的Float32arry数据
// 声明获取数据的数组
var getPCMarrayBuffer = []
// 初始化浏览器录音
recorderInit() {
navigator.getUserMedia =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia
// 创建音频环境
try {
this.audioContext = new (window.AudioContext || window.webkitAudioContext)()
this.audioContext.resume()
if (!this.audioContext) {
alert('浏览器不支持webAudioApi相关接口')
return
}
} catch (e) {
if (!this.audioContext) {
alert('浏览器不支持webAudioApi相关接口')
return
}
}
// 获取浏览器录音权限
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices
.getUserMedia({
audio: {
volume: 1.0,
},
video: false,
})
.then(stream => {
getMediaSuccess(stream)
})
.catch(e => {
getMediaFail(e)
})
} else if (navigator.getUserMedia) {
navigator.getUserMedia(
{
audio: {
volume: 1.0,
},
video: false,
},
stream => {
getMediaSuccess(stream)
},
function(e) {
getMediaFail(e)
}
)
} else {
if (navigator.userAgent.toLowerCase().match(/chrome/) && location.origin.indexOf('https://') < 0) {
alert('chrome下获取浏览器录音功能，因为安全性问题，需要在localhost或127.0.0.1或https下才能获取权限')
} else {
alert('无法获取浏览器录音功能，请升级浏览器或使用chrome')
}
this.audioContext && this.audioContext.close()
return
}
// 获取浏览器录音权限成功的回调
let getMediaSuccess = stream => {
// 创建一个用于通过JavaScript直接处理音频
this.scriptProcessor = this.audioContext.createScriptProcessor(0, 1, 1)
this.scriptProcessor.onaudioprocess = e => {
// 去处理音频数据
getPCMarrayBuffer.push(e.inputBuffer.getChannelData(0).slice(0))
}
// 创建一个新的MediaStreamAudioSourceNode 对象，使来自MediaStream的音频可以被播放和操作
this.mediaSource = this.audioContext.createMediaStreamSource(stream)
// 连接
this.mediaSource.connect(this.scriptProcessor)
this.scriptProcessor.connect(this.audioContext.destination)
}
let getMediaFail = (e) => {
alert('请求录音权限失败，打开权限再试~')
this.audioContext && this.audioContext.close()
this.audioContext = undefined
}
}
二 新建lamejs，并引入；下载方式
npm install lamejsimport lamejs, { Mp3Enc } from 'lamejs'
/**
* 音频转换
*/
export class AudioConvert {
/**
* 录音获得的 Float32Array 的数组转换成 Mp3 格式的 Blob 对象
* @param data
*/
static float32ArrayToMp3(data: Float32Array[]): Blob {
const audioData = AudioConvert.mergeArray(data)
const int16Buffer = AudioConvert.floatArray2Int16(audioData)
return AudioConvert.encodeMono(1, 44100, int16Buffer)
}
/**
* 合并单个声道的多个片段
* @param list
*/
private static mergeArray(list: Float32Array[]) {
const length = list.length * list[0].length
let data = new Float32Array(length)
let offset = 0
for (let i = 0; i < list.length; i++) {
console.log(i)
data.set(list[i], offset)
offset += list[i].length
}
return data
}
private static floatArray2Int16(floatBuffer: Float32Array) {
const int16Buffer = new Int16Array(floatBuffer.length)
for (let i = 0, len = floatBuffer.length; i < len; i++) {
if (floatBuffer[i] < 0) {
int16Buffer[i] = 0x8000 * floatBuffer[i]
} else {
int16Buffer[i] = 0x7fff * floatBuffer[i]
}
}
return int16Buffer
}
private static encodeMono(channels: number, sampleRate: number, samples: Int16Array) {
const buffer = []
const mp3enc: Mp3Enc = new lamejs.Mp3Encoder(channels, sampleRate, 128)
let remaining = samples.length
const maxSamples = 1152
for (let i = 0; remaining >= maxSamples; i += maxSamples) {
const mono = samples.subarray(i, i + maxSamples)
const mp3buf = mp3enc.encodeBuffer(mono)
if (mp3buf.length > 0) {
buffer.push(new Int8Array(mp3buf))
}
remaining -= maxSamples
}
const d = mp3enc.flush()
if (d.length > 0) {
buffer.push(new Int8Array(d))
}
// console.log('done encoding, size=', buffer.length)
return new Blob(buffer, { type: 'audio/mp3' })
}
}
三 调用float32ArrayToMp3方法，录音获得的 Float32Array 的数组转换成 Mp3 格式的 Blob 对象；并播放
let blob = float32ArrayToMp3(getPCMarrayBuffer);
let blobUrl2 = window.URL.createObjectURL(blob)
document.getElementById("audio").src = blobUrl2;
setTimeout(()=>{
document.getElementById("audio").play()
},100)