如何使用 javascript 获取语音数据并播放

该网站想要使用你的麦克风

在我们开发网页的时候，偶尔会有需要用户录音的情况。那么就需要用到这个API：navigator.mediaDevices.getUserMedia

一调用这个方法，一般浏览器就会弹出标题的这句话，这是在问用户索要权限。该方法可以问用户索取麦克风以及摄像头的权限，不过这里我们就只需要麦克风就足够。

var constraints = { audio: true, video:false };
var promise = navigator.mediaDevices.getUserMedia(constraints);
           

这个方法返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

如果调用成功，我们就可以获得MediaStream，而我们需要做的就是吧MediaStream记录下来，形成一段数据，之后不论是播放还是上传到服务器都更容易。

这时我们就需要新的类。MediaRecorder。MediaRecorder会帮助我们将MediaStream对象中的数据记录下来。

具体代码如下：

var constraints = { audio: true,video:false }
var promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (stream) {
    var audio = document.createElement('audio');
    var recorder = new MediaRecorder(stream);
    recorder.start(); // 开始记录

    setTimeout(() => { recorder.stop() }, 5000); // 5秒后停止记录

    recorder.ondataavailable = function (event) {
    	// 当停止记录后播放数据
        console.log(event.data); // Blob
        audio.src = URL.createObjectURL(event.data);
        audio.play()
    }
});

promise.catch(function (error) {
    console.log(error)
});
           

这样当运行的时候就会自动记录5s并播放刚才的录音了。

需要将MediaRecorder.stop方法执行后就会触发ondataavailable的回调函数，如果需要将数据记录或者上传，只需要在回调函数中进行处理即可。