随着互联网技术的不断更新，音频录制及播放逐渐成为了不可或缺的功能，尤其在一些音乐、语音社交应用中，更是发挥了极其重要的作用。那么，在开发过程中，如何使用 Vue.js 实现音频录制及播放的功能呢？本文为大家详细介绍实现技巧及示例代码。
一、音频录制
在实现音频录制之前，我们需要了解 HTML5 中的 MediaRecorder 接口，用于在浏览器中录制媒体流。但需要注意的是，该接口在不同浏览器下存在差异，需要进行浏览器兼容性处理。下面，我们通过代码实现如何录制音频。
1. 引用 MediaRecorder
在 Vue.js 组件的 script 标签内引用 MediaRecorder：
// javascriptcn.com 代码示例
let MediaRecorder = window.MediaRecorder || window.webkitMediaRecorder;
let recorder;
let chunks = [];
let audioContext = new AudioContext();
let source;
let buffer;
let bufferLength;
let dataArray;
let gainNode;
export default {
data() {
return {
recording: false,
url: '',
playing: false,
}
},
created() {
navigator.mediaDevices.getUserMedia({audio: true}).then(stream => {
this.initRecorder(stream);
}).catch(err => {
console.error(`getUserMedia error: ${err.message}`);
});
},
methods: {
initRecorder(stream) {
recorder = new MediaRecorder(stream);
recorder.ondataavailable = e => {
chunks.push(e.data);
};
recorder.onstop = e => {
this.onRecorderStop();
};
source = audioContext.createMediaStreamSource(stream);
gainNode = audioContext.createGain();
source.connect(gainNode);
let analyser = audioContext.createAnalyser();
source.connect(analyser);
analyser.connect(audioContext.destination);
bufferLength = analyser.frequencyBinCount;
buffer = new Uint8Array(bufferLength);
dataArray = new Uint8Array(bufferLength);
},
}
};在这段代码中，我们先进行了 MediaRecorder 的引用，然后使用 getUserMedia 获取录音流并进行 recorder 初始化。具体而言，我们设置了 ondataavailable，用于在录制过程中每一帧的 data 都被收集到 chunks 数组中，最后在 recorder 的 onstop 中调用 onRecorderStop 方法，将录制的音频数据转换为 URL 形式并对音频进行分析。
2. 开始和停止录制
在大多数应用场景中，我们需要提供开始录制和停止录制的按钮，并通过点击触发相应的事件。我们来看一下这里的实现。
<template>
<div>
<button @click="record" :disabled="recording">开始录制</button>
<button @click="stop" :disabled="!recording">停止录制</button>
</div>
</template>// javascriptcn.com 代码示例
methods: {
record() {
recorder.start();
this.recording = true;
this.playing = false;
},
stop() {
recorder.stop();
this.recording = false;
},
onRecorderStop() {
let blob = new Blob(chunks, { type : 'audio/ogg; codecs=opus' });
chunks = [];
let url = URL.createObjectURL(blob);
this.url = url;
this.play();
},
}在这段代码中，我们首先设置了开始录制和停止录制的按钮，并通过 disabled 属性对按钮是否可点击进行控制。当点击开始录制后，我们调用 recorder.start()， 开始录音，并设置 recording 为 true，playback 为 false。当点击结束录制之后，我们调用 recorder.stop() 结束录音，并将 recording 设置为 false。在 onRecorderStop 方法中，我们将 chunks 转换为 Blob 对象，并将 url 赋值给组件内的变量，随后自动播放录制的音频。
二、音频播放
当我们实现了音频录制的功能后，接下来就需要实现音频的播放功能了。接下来，我们来介绍如何使用 Vue.js 实现音频播放的功能。
1. 引入 AudioSource
// javascriptcn.com 代码示例
let audioContext = new (window.AudioContext || window.webkitAudioContext)();
let gainNode;
let source;
let buffer;
let bufferLength;
let dataArray;
export default {
data() {
return {
url: '',
playing: false
}
},
methods: {
initPlayer() {
source = audioContext.createBufferSource();
source.buffer = buffer;
source.connect(gainNode);
gainNode.connect(audioContext.destination);
this.play();
},
play() {
source.start(0);
this.playing = true;
requestAnimationFrame(this.visualize);
},
stop() {
source.stop();
this.playing = false;
cancelAnimationFrame(this.visualize);
},
}
}在这段代码中，我们先将 buffer 赋值给 source 变量，然后添加了开始播放和停止播放的方法。具体而言，我们通过 source.start() 方法开始播放音频，并设置 playing 为 true，使用 requestAnimationFrame 开始动态可视化播放的过程；使用 source.stop() 方法停止播放音频，并将 playing 设置为 false，使用 cancelAnimationFrame 停止动态可视化过程。
2. 可视化播放
为了提高使用体验，我们还可以添加可视化功能来让用户更好的了解播放音频的过程。下面是可视化播放的具体实现。
// javascriptcn.com 代码示例
visualize() {
let canvas = document.getElementById('canvas');
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
let context = canvas.getContext('2d');
let width = canvas.width;
let height = canvas.height;
analyser.getByteFrequencyData(buffer);
context.fillStyle = '#000';
context.fillRect(0,0,width,height);
context.lineWidth = 2;
context.strokeStyle = '#0ff';
context.beginPath();
let sliceWidth = width * 1.0 / bufferLength;
let x = 0;
for(let i = 0; i < bufferLength; i++) {
let v = buffer[i] / 128.0;
let y = v * height / 2;
if(i === 0) {
context.moveTo(x, y);
} else {
context.lineTo(x, y);
}
x += sliceWidth;
}
context.lineTo(width, height / 2);
context.stroke();
requestAnimationFrame(this.visualize);
}在这段代码中，我们在组件的 canvas 元素中绘制音频可视化，随着音频的播放，可视化也变化。我们使用 getByteFrequencyData 方法获取 buffer 中的数据，并使用上下文的 fillRect 方法填充黑色背景。然后使用上下文的 beginPath 绘制可视化条形，并使用 stroke 方法绘制到页面上。
三、总结
以上就是实现音频录制及播放的方法及相关示例代码。需要注意的是，由于 MediaRecorder和 AudioSource 接口在不同浏览器下存在差异，音频录制播放时还需要进行浏览器兼容性处理。在实际开发中，除了录制和播放，我们还可以结合其他 API，在应用中加入更多有趣的功能。希望这篇文章能对您在开发应用时使用 Vue.js 实现音频录制及播放功能提供帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6541de627d4982a6ebb7bb45