利用網頁錄製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對象創建出來的錄音文件。