html5录音功能实战示例

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