利用网页录制wav格式的音频文件

需要使用第三方的Recorder.js库，并使用AudioContext进行录制。

Recorder.js的Github地址为https://github.com/mattdiamond/Recorderjs，作者提供了一个官方案例，但是因为年代有些久远，所以需要在案例的基础上进行部分修改：

第一步：引入Recorder.js

<script src="recorder.js"></script>

第二步：搭建简单的HTML

<button onclick="start(this);">开始</button>
<button onclick="stop(this);">结束</button>
<ul id="recordingslist"></ul>

第三步：编写start函数和stop函数

var audio_context;
var recorder;
function start(button) {
        navigator.mediaDevices.getUserMedia({ audio: true }).then(function (stream) {
            var input = new AudioContext().createMediaStreamSource(stream);
            recorder = new Recorder(input);
            recorder.record();
        });
        button.disabled = true;
        button.nextElementSibling.disabled = false;

}

function stop(button) {
        recorder && recorder.stop();
        button.disabled = true;
        button.previousElementSibling.disabled = false;
        createDownloadLink();
        recorder.clear();
}

start函数的作用主要是：

• 调用getUserMedia({audio:true})函数申请使用麦克风的权限。
• 利用AudioContext创建输入源。
• 创建Recorder对象，并调用其record方法开始录音。
• 开始按钮不能点击，结束按钮可以点击

stop函数的主要作用是：

• 调用Recorder对象的stop方法停止录音。
• 调用自定义的createDownloadLink函数，该函数是用来创建audio标签播放刚录制好的声音文件以及创建一个下载该声音文件的链接。
• 回收Recorder对象
• 结束按钮不可点击，开始按钮可以点击。

第四步：创建createDownloadLink函数：

function createDownloadLink() {
        recorder && recorder.exportWAV(function (blob) {
            var reader = new FileReader();

            reader.onloadend = function () {
                var data = reader.result;
                ...
            }
            reader.readAsDataURL(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);
        });
    }

createDownloadLink函数的主要作用是：

• 调用Recorder对象的exportWAV方法生成wav格式的录音文件，生成后以blob对象的形式传入回调函数中。
• 回调函数中可以使用FileReader对象的readAsDataURL方法读取blob对象，在回调中可以获得blob对象的包含data：URL，BASE64字符串。后续可以上传到服务器做后续诸如语音识别，语音合成等应用。
• 利用代码创建一个audio播放器，播放根据blob对象创建出来的录音文件。
• 利用代码创建一个a标签，可以下载以当前时间为文件名的扩展名为wav的根据blob对象创建出来的录音文件。