vue上传录音_vue实现PC端录音功能的实例代码

录音功能一般来说在移动端比较常见，但是在pc端也要实现按住说话的功能呢？项目需求：按住说话，时长不超过60秒，生成语音文件并上传，我这里用的是recorder.js

1.项目中新建一个recorder.js文件，内容如下，也可在百度上直接搜一个

// 兼容

window.URL = window.URL || window.webkitURL

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia

let HZRecorder = function (stream, config) {

config = config || {}

config.sampleBits = config.sampleBits || 8 // 采样数位 8, 16

config.sampleRate = config.sampleRate || (44100 / 6) // 采样率(1/6 44100)

let context = new (window.webkitAudioContext || window.AudioContext)()

let audioInput = context.createMediaStreamSource(stream)

let createScript = context.createScriptProcessor || context.createJavaScriptNode

let recorder = createScript.apply(context, [4096, 1, 1])

let audioData = {

size: 0, // 录音文件长度

buffer: [], // 录音缓存

inputSampleRate: context.sampleRate, // 输入采样率

inputSampleBits: 16, // 输入采样数位 8, 16

outputSampleRate: config.sampleRate, // 输出采样率

oututSampleBits: config.sampleBits, // 输出采样数位 8, 16

input: function (data) {

this.buffer.push(new Float32Array(data))

this.size += data.length

},

compress: function () { // 合并压缩

// 合并

let data = new Float32Array(this.size)

let offset = 0

for (let i = 0; i < this.buffer.length; i++) {

data.set(this.buffer[i], offset)

offset += this.buffer[i].length

}

// 压缩

let compression = parseInt(this.inputSampleRate / this.outputSampleRate)

let length = data.length / compression

let result = new Float32Array(length)

let index = 0; let j = 0

while (index < length) {

result[index] = data[j]

j += compression

index++

}

return result

},

encodeWAV: function () {

let sampleRate = Math.min(this.inputS