h5 php录音功能下载,html5录音功能实战示例

缘起

由于项目需要，我们要在web端实现录音功能。一开始，找到的方案有两个，一个是通过iframe，一个是html5的getUserMedia api。由于我们的录音功能不需要兼容IE浏览器，所以毫不犹豫的选择了html5提供的getUserMedia去实现。基本思路是参考了官方的api文档以及网上查找的一些方案做结合做出了适合项目需要的方案。但由于我们必须保证这个录音功能能够同时在pad端、pc端都可以打开，所以其中也踩了一些坑。以下为过程还原。

步骤1

由于新的api是通过navigator.mediaDevices.getUserMedia，且返回一个promise。

而旧的api是navigator.getUserMedia，于是做了一个兼容性。代码如下：

// 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象

if (navigator.mediaDevices === undefined) {

navigator.mediaDevices = {};

}

// 一些浏览器部分支持 mediaDevices。我们不能直接给对象设置 getUserMedia

// 因为这样可能会覆盖已有的属性。这里我们只会在没有getUserMedia属性的时候添加它。

if (navigator.mediaDevices.getUserMedia === undefined) {

let getUserMedia =

navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia ||

navigator.msGetUserMedia;

navigator.mediaDevices.getUserMedia = function(constraints) {

// 首先，如果有getUserMedia的话，就获得它

// 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口

if (!getUserMedia) {

return Promise.reject(new Error('getUserMedia is not implemented in this browser'));

}

// 否则，为老的navigator.getUserMedia方法包裹一个Promise

return new Promise(function(resolve, reject) {

getUserMedia.call(navigator, constraints, resolve, reject);

});

};

步骤2

这是网上存在的一个方法，封装了一个HZRecorder。基本上引用了这个方法。调用HZRecorder.get就可以调起录音接口，这个方法传入一个callback函数，new HZRecorder后执行callback函数且传入一个实体化后的HZRecorder对象。可以通过该对象的方法实现开始录音、暂停、停止、播放等功能。

var HZRecorder = function (stream, config) {

config = config || {};

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

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

//创建一个音频环境对象

audioContext = window.AudioContext || window.webkitAudioContext;

var context = new audioContext();

//将声音输入这个对像

var audioInput = context.createMediaStreamSource(stream);

//设置音量节点

var volume = context.createGain();

audioInput.connect(volume);

//创建缓存，用来缓存声音

var bufferSize = 4096;

// 创建声音的缓存节点，createScriptProcessor方法的

// 第二个和第三个参数指的是输入和输出都是双声道。

var recorder = context.createScriptProcessor(bufferSize, 2, 2);

var 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 () { //合并压缩

//合并

var data = new Float32Array(this.size);

var offset = 0;

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

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

offset += this.buffer[i].length;

}

//压缩

var compression = parseInt(this.inputSampleRate / this.outputSampleRate);

var length = data.length / compression;

var result = new Float32Array(length);

var index = 0, j = 0;

while (index < length) {

result[index] = data[j];

j += compression;

index++;

}

return result;

}

, encodeWAV: function () {

var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);

var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);

var bytes = this.compress();

var dataLength = bytes.length * (sampleBits / 8);

var buffer = new ArrayBuffer(44 + dataLength);

var data = new DataView(buffer);

var channelCount = 1;//单声道

var offset = 0;

var writeString = function (str) {

for (var i = 0; i < str.length; i++) {

data.setUint8(offset + i, str.charCodeAt(i));

}

};

// 资源交换文件标识符

writeString('RIFF'); offset += 4;

// 下个地址开始到文件尾总字节数,即文件大小-8

data.setUint32(offset, 36 + dataLength, true); offset += 4;

// WAV文件标志

writeString('WAVE'); offset += 4;

// 波形格式标志

writeString('fmt '); offset += 4;

// 过滤字节,一般为 0x10 = 16

data.setUint32(offset, 16, true); offset += 4;

// 格式类别 (PCM形式采样数据)

data.setUint16(offset, 1, true); offset += 2;

// 通道数

data.setUint16(offset, channelCount, true); offset += 2;

// 采样率,每秒样本数,表示每个通道的播放速度

data.setUint32(offset, sampleRate, true); offset += 4;

// 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8

data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true); offset += 4;

// 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8

data.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;

// 每样本数据位数

data.setUint16(offset, sampleBits, true); offset += 2;

// 数据标识符

writeString('data'); offset += 4;

// 采样数据总数,即数据总大小-44

data.setUint32(offset, dataLength, true); offset += 4;

// 写入采样数据

if (sampleBits === 8) {

for (var i = 0; i < bytes.length; i++, offset++) {

var s = Math.max(-1, Math.min(1, bytes[i]));

var val = s < 0 ? s * 0x8000 : s * 0x7FFF;

val = parseInt(255 / (65535 / (val + 32768)));

data.setInt8(offset, val, true);

}

} else {

for (var i = 0; i < bytes.length; i++, offset += 2) {

var s = Math.max(-1, Math.min(1, bytes[i]));

data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);

}

}

return new Blob([data], { type: 'audio/wav' });

}

};

//开始录音

this.start = function () {

audioInput.connect(recorder);

recorder.connect(context.destination);

};

//停止

this.stop = function () {

recorder.disconnect();

};

// 结束

this.end = function() {

context.close();

};

// 继续

this.again = function() {

recorder.connect(context.destination);

};

//获取音频文件

this.getBlob = function () {

this.stop();

return audioData.encodeWAV();

};

//回放

this.play = function (audio) {

audio.src = window.URL.createObjectURL(this.getBlob());

};

//上传

this.upload = function (url, callback) {

var fd = new FormData();

fd.append('audioData', this.getBlob());

var xhr = new XMLHttpRequest();

if (callback) {

xhr.upload.addEventListener('progress', function (e) {

callback('uploading', e);

}, false);

xhr.addEventListener('load', function (e) {

callback('ok', e);

}, false);

xhr.addEventListener('error', function (e) {

callback('error', e);

}, false);

xhr.addEventListener('abort', function (e) {

callback('cancel', e);

}, false);

}

xhr.open('POST', url);

xhr.send(fd);

};

//音频采集

recorder.onaudioprocess = function (e) {

audioData.input(e.inputBuffer.getChannelData(0));

//record(e.inputBuffer.getChannelData(0));

};

};

//抛出异常

HZRecorder.throwError = function (message) {

throw new function () { this.toString = function () { return message; };};

};

//是否支持录音

HZRecorder.canRecording = (navigator.getUserMedia != null);

//获取录音机

HZRecorder.get = function (callback, config) {

if (callback) {

navigator.mediaDevices

.getUserMedia({ audio: true })

.then(function(stream) {

let rec = new HZRecorder(stream, config);

callback(rec);

})

.catch(function(error) {

HZRecorder.throwError('无法录音，请检查设备状态');

});

}

};

window.HZRecorder = HZRecorder;

以上，已经可以满足大部分的需求。但是我们要兼容pad端。我们的pad有几个问题必须解决。

录音格式必须是mp3才能播放

window.URL.createObjectURL传入blob数据在pad端报错，转不了

以下为解决这两个问题的方案。

步骤3

以下为我实现 录音格式为mp3 和 window.URL.createObjectURL传入blob数据在pad端报错 的方案。

1、修改HZRecorder里的audioData对象代码。并引入网上一位大神的一个js文件lamejs.js

const lame = new lamejs();

let audioData = {

samplesMono: null,

maxSamples: 1152,

mp3Encoder: new lame.Mp3Encoder(1, context.sampleRate || 44100, config.bitRate || 128),

dataBuffer: [],

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

buffer: [], // 录音缓存

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

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

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

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

convertBuffer: function(arrayBuffer) {

let data = new Float32Array(arrayBuffer);

let out = new Int16Array(arrayBuffer.length);

this.floatTo16BitPCM(data, out);

return out;

},

floatTo16BitPCM: function(input, output) {

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

let s = Math.max(-1, Math.min(1, input[i]));

output[i] = s < 0 ? s * 0x8000 : s * 0x7fff;

}

},

appendToBuffer: function(mp3Buf) {

this.dataBuffer.push(new Int8Array(mp3Buf));

},

encode: function(arrayBuffer) {

this.samplesMono = this.convertBuffer(arrayBuffer);

let remaining = this.samplesMono.length;

for (let i = 0; remaining >= 0; i += this.maxSamples) {

let left = this.samplesMono.subarray(i, i + this.maxSamples);

let mp3buf = this.mp3Encoder.encodeBuffer(left);

this.appendToBuffer(mp3buf);

remaining -= this.maxSamples;

}

},

finish: function() {

this.appendToBuffer(this.mp3Encoder.flush());

return new Blob(this.dataBuffer, { type: 'audio/mp3' });

},

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, 10);

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.inputSampleRate, this.outputSampleRate);

let sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);

let bytes = this.compress();

let dataLength = bytes.length * (sampleBits / 8);

let buffer = new ArrayBuffer(44 + dataLength);

let data = new DataView(buffer);

let channelCount = 1; // 单声道

let offset = 0;

let writeString = function(str) {

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

data.setUint8(offset + i, str.charCodeAt(i));

}

};

// 资源交换文件标识符

writeString('RIFF');

offset += 4;

// 下个地址开始到文件尾总字节数,即文件大小-8

data.setUint32(offset, 36 + dataLength, true);

offset += 4;

// WAV文件标志

writeString('WAVE');

offset += 4;

// 波形格式标志

writeString('fmt ');

offset += 4;

// 过滤字节,一般为 0x10 = 16

data.setUint32(offset, 16, true);

offset += 4;

// 格式类别 (PCM形式采样数据)

data.setUint16(offset, 1, true);

offset += 2;

// 通道数

data.setUint16(offset, channelCount, true);

offset += 2;

// 采样率,每秒样本数,表示每个通道的播放速度

data.setUint32(offset, sampleRate, true);

offset += 4;

// 波形数据传输率 (每秒平均字节数) 单声道×每秒数据位数×每样本数据位/8

data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true);

offset += 4;

// 快数据调整数 采样一次占用字节数 单声道×每样本的数据位数/8

data.setUint16(offset, channelCount * (sampleBits / 8), true);

offset += 2;

// 每样本数据位数

data.setUint16(offset, sampleBits, true);

offset += 2;

// 数据标识符

writeString('data');

offset += 4;

// 采样数据总数,即数据总大小-44

data.setUint32(offset, dataLength, true);

offset += 4;

// 写入采样数据

if (sampleBits === 8) {

for (let i = 0; i < bytes.length; i++, offset++) {

const s = Math.max(-1, Math.min(1, bytes[i]));

let val = s < 0 ? s * 0x8000 : s * 0x7fff;

val = parseInt(255 / (65535 / (val + 32768)), 10);

data.setInt8(offset, val, true);

}

} else {

for (let i = 0; i < bytes.length; i++, offset += 2) {

const s = Math.max(-1, Math.min(1, bytes[i]));

data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);

}

}

return new Blob([data], { type: 'audio/wav' });

}

};

2、修改HZRecord的音频采集的调用方法。

// 音频采集

recorder.onaudioprocess = function(e) {

audioData.encode(e.inputBuffer.getChannelData(0));

};

3、HZRecord的getBlob方法。

this.getBlob = function() {

this.stop();

return audioData.finish();

};

4、HZRecord的play方法。把blob转base64url。

this.play = function(func) {

readBlobAsDataURL(this.getBlob(), func);

};

function readBlobAsDataURL(data, callback) {

let fileReader = new FileReader();

fileReader.onload = function(e) {

callback(e.target.result);

};

fileReader.readAsDataURL(data);

}

至此，已经解决以上两个问题。

步骤4

这里主要介绍怎么做录音时的动效。我们的一个动效需求为：

根据传入的音量大小，做一个圆弧动态扩展。

// 创建analyser节点，获取音频时间和频率数据

const analyser = context.createAnalyser();

audioInput.connect(analyser);

const inputAnalyser = new Uint8Array(1);

const wrapEle = $this.refs['wrap'];

let ctx = wrapEle.getContext('2d');

const width = wrapEle.width;

const height = wrapEle.height;

const center = {

x: width / 2,

y: height / 2

};

function drawArc(ctx, color, x, y, radius, beginAngle, endAngle) {

ctx.beginPath();

ctx.lineWidth = 1;

ctx.strokeStyle = color;

ctx.arc(x, y, radius, (Math.PI * beginAngle) / 180, (Math.PI * endAngle) / 180);

ctx.stroke();

}

(function drawSpectrum() {

analyser.getByteFrequencyData(inputAnalyser); // 获取频域数据

ctx.clearRect(0, 0, width, height);

// 画线条

for (let i = 0; i < 1; i++) {

let value = inputAnalyser[i] / 3; // <===获取数据

let colors = [];

if (value <= 16) {

colors = ['#f5A631', '#f5A631', '#e4e4e4', '#e4e4e4', '#e4e4e4', '#e4e4e4'];

} else if (value <= 32) {

colors = ['#f5A631', '#f5A631', '#f5A631', '#f5A631', '#e4e4e4', '#e4e4e4'];

} else {

colors = ['#f5A631', '#f5A631', '#f5A631', '#f5A631', '#f5A631', '#f5A631'];

}

drawArc(ctx, colors[0], center.x, center.y, 52 + 16, -30, 30);

drawArc(ctx, colors[1], center.x, center.y, 52 + 16, 150, 210);

drawArc(ctx, colors[2], center.x, center.y, 52 + 32, -22.5, 22.5);

drawArc(ctx, colors[3], center.x, center.y, 52 + 32, 157.5, 202.5);

drawArc(ctx, colors[4], center.x, center.y, 52 + 48, -13, 13);

drawArc(ctx, colors[5], center.x, center.y, 52 + 48, 167, 193);

}

// 请求下一帧

requestAnimationFrame(drawSpectrum);

})();

缘尽

至此，一个完整的html5录音功能方案已经完成。有什么需要补充，不合理的地方的欢迎留言。

ps：lamejs可参考这个github

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。