未加星标

Learning How to Capture and Record Audio in HTML5

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

It is known that getUserMedia , the API defined by WebRTC , is the main method for accessing media capture devices such as webcam and microphone in web pages. The compatible desktop web browsers include Chrome, Firefox, Opera, and Edge. This article will share the resources for learning how to capture and record audio in html5.


Learning How to Capture and Record Audio in HTML5
How to capture audio from a microphone in HTML5?

Here is the code snippet from MDN (Mozilla Developer Network):

var p = navigator.mediaDevices.getUserMedia({ audio: true, video: true });
p.then(function(mediaStream) {
var video = document.querySelector('video');
video.src = window.URL.createObjectURL(mediaStream);
video.onloadedmetadata = function(e) {
// Do something with the video here.
video.play();
};
});
p.catch(function(err) { console.log(err.name); }); // always check for errors at the end.

The returned media stream includes video stream track and audio stream track.

Browser compatibility:

Desktop


Learning How to Capture and Record Audio in HTML5

Mobile


Learning How to Capture and Record Audio in HTML5
How to record audio stream and upload it to a remote server? Interfaces for Recording Audio

Using MediaRecorder API is the ideal way for recording media streams, but it is not well supported so far.

Browser compatibility:

Desktop


Learning How to Capture and Record Audio in HTML5

Mobile


Learning How to Capture and Record Audio in HTML5

Alternatively, we can record audio with AudioNodes , which represents audio sources, the audio destination, and intermediate processing modules.

The basic steps of recording audio in HTML5 Capture media stream with getUserMedia . Create a MediaStreamAudioSourceNode with createMediaStreamSource . if (navigator.getUserMedia) {
console.log('getUserMedia supported.');
navigator.getUserMedia (
// constraints: audio and video for this app
{
audio: true,
video: true
},
// Success callback
function(stream) {
video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
video.onloadedmetadata = function(e) {video.play();video.muted = 'true';
};
// Create a MediaStreamAudioSourceNode
// Feed the HTMLMediaElement into it
var source = audioCtx.createMediaStreamSource(stream);
},
// Error callback
function(err) {
console.log('The following gUM error occured: ' + err);
}
);
} else {
console.log('getUserMedia not supported on your browser!');
} Connect AudioNodes . Process audio with ScriptProcessorNode . Use the onaudioprocess event to get the audio buffer. var scriptNode = audioCtx.createScriptProcessor(4096, 1, 1);
scriptNode.onaudioprocess = function(audioProcessingEvent) {
// The input buffer is the song we loaded earlier
var inputBuffer = audioProcessingEvent.inputBuffer;
// Loop through the output channels (in this case there is only one)
for (var channel = 0; channel < outputBuffer.numberOfChannels; channel++) {
var inputData = inputBuffer.getChannelData(channel);
}
}
source.connect(scriptNode);
scriptNode.connect(audioCtx.destination); Encode the audio buffer and send it via XMLHttpRequest or WebSockets . javascript Libraries

I found two useful JavaScript libraries for audio recording on GitHub: RecordRTC and Recorderjs .

RecordRTCis powerful for both video and audio recording (try the online demo ), whereas Recorderjs is less complicated that it only supports audio recording. Let’s anatomize the code logic of Recorderjs.

Use onaudioprocess event to receiveaudio buffer:

this.context = source.context;
this.node = (this.context.createScriptProcessor || this.context.createJavaScriptNode).call(this.context, this.config.bufferLen, this.config.numChannels, this.config.numChannels);
this.node.onaudioprocess = function (e) {if (!_this.recording) return;var buffer = [];for (var channel = 0; channel < _this.config.numChannels; channel++) { buffer.push(e.inputBuffer.getChannelData(channel));}_this.worker.postMessage({ command: 'record', buffer: buffer});
};
source.connect(this.node);
this.node.connect(this.context.destination); //this should not be necessary

Cache received audio buffer:

function record(inputBuffer) { for (var channel = 0; channel < numChannels; channel++) { recBuffers[channel].push(inputBuffer[channel]); } recLength += inputBuffer[0].length;}

Encode audio buffer to WAV format:

function encodeWAV(samples) { var buffer = new ArrayBuffer(44 + samples.length * 2); var view = new DataView(buffer); /* RIFF identifier */ writeString(view, 0, 'RIFF'); /* RIFF chunk length */ view.setUint32(4, 36 + samples.length * 2, true); /* RIFF type */ writeString(view, 8, 'WAVE'); /* format chunk identifier */ writeString(view, 12, 'fmt '); /* format chunk length */ view.setUint32(16, 16, true); /* sample format (raw) */ view.setUint16(20, 1, true); /* channel count */ view.setUint16(22, numChannels, true); /* sample rate */ view.setUint32(24, sampleRate, true); /* byte rate (sample rate * block align) */ view.setUint32(28, sampleRate * 4, true); /* block align (channel count * bytes per sample) */ view.setUint16(32, numChannels * 2, true); /* bits per sample */ view.setUint16(34, 16, true); /* data chunk identifier */

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTMLHTML5JavaScriptJavaGitXMLWebSocketChromeGitHubFirefox
分页:12
转载请注明
本文标题:Learning How to Capture and Record Audio in HTML5
本站链接:http://www.codesec.net/view/484066.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(32)