Recorder.js HTML5 麦克风录音输出到WAV

Recorder.js simple WAV export example，请注意允许浏览器访问麦克风接口。

html5, microphone

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 17832
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

function __log(e, data) {
    log.innerHTML += "\n" + e + " " + (data || '');
}
var audio_context;
var recorder;

function startUserMedia(stream) {
    var input = audio_context.createMediaStreamSource(stream);
    __log('Media stream created.');
    // Uncomment if you want the audio to feedback directly
    //input.connect(audio_context.destination);
    //__log('Input connected to audio context destination.');

recorder = new Recorder(input);
    __log('Recorder initialised.');
}

function startRecording(button) {
    recorder && recorder.record();
    button.disabled = true;
    button.nextElementSibling.disabled = false;
    __log('Recording...');
}

function stopRecording(button) {
    recorder && recorder.stop();
    button.disabled = true;
    button.previousElementSibling.disabled = false;
    __log('Stopped recording.');

// create WAV download link using audio data blob
    createDownloadLink();

recorder.clear();
}

function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
        var url = URL.createObjectURL(blob);
        var li = document.createElement('li');
        var au = document.createElement('audio');
        var hf = document.createElement('a');

au.controls = true;
        au.src = url;
        hf.href = url;
        hf.download = new Date().toISOString() + '.wav';
        hf.innerHTML = hf.download;
        li.appendChild(au);
        li.appendChild(hf);
        recordingslist.appendChild(li);
    });
}
window.onload = function init() {
    try {
        // webkit shim
        window.AudioContext = window.AudioContext || window.webkitAudioContext;
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
        window.URL = window.URL || window.webkitURL;

audio_context = new AudioContext;
        __log('Audio context set up.');
        __log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
    } catch (e) {
        alert('No web audio support in this browser!');
    }

navigator.getUserMedia({
        audio: true
    }, startUserMedia, function(e) {
        __log('No live audio input: ' + e);
    });
};

编译

CSS

HTML

Recorder.js simple WAV export example，请注意允许浏览器访问麦克风接口。

html5, microphone

编辑器支持Emmet

快捷键

Recorder.js simple WAV export example，请注意允许浏览器访问麦克风接口。

html5, microphone

HTML5 Three.js VideoTexture全息摄像头下的鬼魅靓影

HTML5 Web音频应用程序接口（Web Audio API）实例：在线演奏木琴

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：