// 老的瀏覽器可能根本沒有實(shí)現(xiàn) mediaDevices，所以我們可以先設(shè)置一個空的對象if (navigator.mediaDevices === undefined) {    navigator.mediaDevices = {};}// 一些瀏覽器部分支持 mediaDevices。我們不能直接給對象設(shè)置 getUserMedia// 因?yàn)檫@樣可能會覆蓋已有的屬性。這里我們只會在沒有g(shù)etUserMedia屬性的時候添加它。if (navigator.mediaDevices.getUserMedia === undefined) {    let getUserMedia =        navigator.getUserMedia ||        navigator.webkitGetUserMedia ||        navigator.mozGetUserMedia ||        navigator.msGetUserMedia;    navigator.mediaDevices.getUserMedia = function(constraints) {        // 首先，如果有g(shù)etUserMedia的話，就獲得它        // 一些瀏覽器根本沒實(shí)現(xiàn)它 - 那么就返回一個error到promise的reject來保持一個統(tǒng)一的接口        if (!getUserMedia) {            return Promise.reject(new Error('getUserMedia is not implemented in this browser'));        }        // 否則，為老的navigator.getUserMedia方法包裹一個Promise        return new Promise(function(resolve, reject) {            getUserMedia.call(navigator, constraints, resolve, reject);        });    };

var HZRecorder = function (stream, config) {      config = config || {};      config.sampleBits = config.sampleBits || 8;      //采樣數(shù)位 8, 16      config.sampleRate = config.sampleRate || (44100 / 6);   //采樣率(1/6 44100)            //創(chuàng)建一個音頻環(huán)境對象      audioContext = window.AudioContext || window.webkitAudioContext;      var context = new audioContext();      //將聲音輸入這個對像      var audioInput = context.createMediaStreamSource(stream);            //設(shè)置音量節(jié)點(diǎn)      var volume = context.createGain();      audioInput.connect(volume);      //創(chuàng)建緩存，用來緩存聲音      var bufferSize = 4096;      // 創(chuàng)建聲音的緩存節(jié)點(diǎn)，createScriptProcessor方法的      // 第二個和第三個參數(shù)指的是輸入和輸出都是雙聲道。      var recorder = context.createScriptProcessor(bufferSize, 2, 2);      var audioData = {          size: 0          //錄音文件長度          , buffer: []     //錄音緩存          , inputSampleRate: context.sampleRate    //輸入采樣率          , inputSampleBits: 16       //輸入采樣數(shù)位 8, 16          , outputSampleRate: config.sampleRate    //輸出采樣率          , oututSampleBits: config.sampleBits       //輸出采樣數(shù)位 8, 16          , input: function (data) {              this.buffer.push(new Float32Array(data));              this.size += data.length;          }          , compress: function () { //合并壓縮              //合并              var data = new Float32Array(this.size);              var offset = 0;              for (var i = 0; i < this.buffer.length; i++) {                  data.set(this.buffer[i], offset);                  offset += this.buffer[i].length;              }              //壓縮              var compression = parseInt(this.inputSampleRate / this.outputSampleRate);              var length = data.length / compression;              var result = new Float32Array(length);              var index = 0, j = 0;              while (index < length) {                  result[index] = data[j];                  j += compression;                  index++;              }              return result;          }          , encodeWAV: function () {              var sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);              var sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);              var bytes = this.compress();              var dataLength = bytes.length * (sampleBits / 8);              var buffer = new ArrayBuffer(44 + dataLength);              var data = new DataView(buffer);              var channelCount = 1;//單聲道              var offset = 0;              var writeString = function (str) {                  for (var i = 0; i < str.length; i++) {                      data.setUint8(offset + i, str.charCodeAt(i));                  }              };                            // 資源交換文件標(biāo)識符               writeString('RIFF'); offset += 4;              // 下個地址開始到文件尾總字節(jié)數(shù),即文件大小-8               data.setUint32(offset, 36 + dataLength, true); offset += 4;              // WAV文件標(biāo)志              writeString('WAVE'); offset += 4;              // 波形格式標(biāo)志               writeString('fmt '); offset += 4;              // 過濾字節(jié),一般為 0x10 = 16               data.setUint32(offset, 16, true); offset += 4;              // 格式類別 (PCM形式采樣數(shù)據(jù))               data.setUint16(offset, 1, true); offset += 2;              // 通道數(shù)               data.setUint16(offset, channelCount, true); offset += 2;              // 采樣率,每秒樣本數(shù),表示每個通道的播放速度               data.setUint32(offset, sampleRate, true); offset += 4;              // 波形數(shù)據(jù)傳輸率 (每秒平均字節(jié)數(shù)) 單聲道×每秒數(shù)據(jù)位數(shù)×每樣本數(shù)據(jù)位/8               data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true); offset += 4;              // 快數(shù)據(jù)調(diào)整數(shù) 采樣一次占用字節(jié)數(shù) 單聲道×每樣本的數(shù)據(jù)位數(shù)/8               data.setUint16(offset, channelCount * (sampleBits / 8), true); offset += 2;              // 每樣本數(shù)據(jù)位數(shù)               data.setUint16(offset, sampleBits, true); offset += 2;              // 數(shù)據(jù)標(biāo)識符               writeString('data'); offset += 4;              // 采樣數(shù)據(jù)總數(shù),即數(shù)據(jù)總大小-44               data.setUint32(offset, dataLength, true); offset += 4;              // 寫入采樣數(shù)據(jù)               if (sampleBits === 8) {                  for (var i = 0; i < bytes.length; i++, offset++) {                      var s = Math.max(-1, Math.min(1, bytes[i]));                      var val = s < 0 ? s * 0x8000 : s * 0x7FFF;                      val = parseInt(255 / (65535 / (val + 32768)));                      data.setInt8(offset, val, true);                  }              } else {                  for (var i = 0; i < bytes.length; i++, offset += 2) {                      var s = Math.max(-1, Math.min(1, bytes[i]));                      data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);                  }              }              return new Blob([data], { type: 'audio/wav' });          }      };      //開始錄音      this.start = function () {          audioInput.connect(recorder);          recorder.connect(context.destination);      };      //停止      this.stop = function () {          recorder.disconnect();      };          // 結(jié)束    this.end = function() {        context.close();    };        // 繼續(xù)    this.again = function() {        recorder.connect(context.destination);    };    //獲取音頻文件      this.getBlob = function () {          this.stop();          return audioData.encodeWAV();      };      //回放      this.play = function (audio) {          audio.src = window.URL.createObjectURL(this.getBlob());      };      //上傳      this.upload = function (url, callback) {          var fd = new FormData();          fd.append('audioData', this.getBlob());          var xhr = new XMLHttpRequest();          if (callback) {              xhr.upload.addEventListener('progress', function (e) {                  callback('uploading', e);              }, false);              xhr.addEventListener('load', function (e) {                  callback('ok', e);              }, false);              xhr.addEventListener('error', function (e) {                  callback('error', e);              }, false);              xhr.addEventListener('abort', function (e) {                  callback('cancel', e);              }, false);          }          xhr.open('POST', url);          xhr.send(fd);      };      //音頻采集      recorder.onaudioprocess = function (e) {          audioData.input(e.inputBuffer.getChannelData(0));          //record(e.inputBuffer.getChannelData(0));      };  };  //拋出異常  HZRecorder.throwError = function (message) {      throw new function () { this.toString = function () { return message; };};  };  //是否支持錄音  HZRecorder.canRecording = (navigator.getUserMedia != null);  //獲取錄音機(jī)  HZRecorder.get = function (callback, config) {     if (callback) {        navigator.mediaDevices            .getUserMedia({ audio: true })            .then(function(stream) {                let rec = new HZRecorder(stream, config);                callback(rec);            })            .catch(function(error) {                HZRecorder.throwError('無法錄音，請檢查設(shè)備狀態(tài)');            });    }};  window.HZRecorder = HZRecorder;

const lame = new lamejs();let audioData = {    samplesMono: null,    maxSamples: 1152,    mp3Encoder: new lame.Mp3Encoder(1, context.sampleRate || 44100, config.bitRate || 128),    dataBuffer: [],    size: 0, // 錄音文件長度    buffer: [], // 錄音緩存    inputSampleRate: context.sampleRate, // 輸入采樣率    inputSampleBits: 16, // 輸入采樣數(shù)位 8, 16    outputSampleRate: config.sampleRate, // 輸出采樣率    oututSampleBits: config.sampleBits, // 輸出采樣數(shù)位 8, 16    convertBuffer: function(arrayBuffer) {        let data = new Float32Array(arrayBuffer);        let out = new Int16Array(arrayBuffer.length);        this.floatTo16BitPCM(data, out);        return out;    },    floatTo16BitPCM: function(input, output) {        for (let i = 0; i < input.length; i++) {            let s = Math.max(-1, Math.min(1, input[i]));            output[i] = s < 0 ? s * 0x8000 : s * 0x7fff;        }    },    appendToBuffer: function(mp3Buf) {        this.dataBuffer.push(new Int8Array(mp3Buf));    },    encode: function(arrayBuffer) {        this.samplesMono = this.convertBuffer(arrayBuffer);        let remaining = this.samplesMono.length;        for (let i = 0; remaining >= 0; i += this.maxSamples) {            let left = this.samplesMono.subarray(i, i + this.maxSamples);            let mp3buf = this.mp3Encoder.encodeBuffer(left);            this.appendToBuffer(mp3buf);            remaining -= this.maxSamples;        }    },    finish: function() {        this.appendToBuffer(this.mp3Encoder.flush());        return new Blob(this.dataBuffer, { type: 'audio/mp3' });    },    input: function(data) {        this.buffer.push(new Float32Array(data));        this.size += data.length;    },    compress: function() {        // 合并壓縮        // 合并        let data = new Float32Array(this.size);        let offset = 0;        for (let i = 0; i < this.buffer.length; i++) {            data.set(this.buffer[i], offset);            offset += this.buffer[i].length;        }        // 壓縮        let compression = parseInt(this.inputSampleRate / this.outputSampleRate, 10);        let length = data.length / compression;        let result = new Float32Array(length);        let index = 0;        let j = 0;        while (index < length) {            result[index] = data[j];            j += compression;            index++;        }        return result;    },    encodeWAV: function() {        let sampleRate = Math.min(this.inputSampleRate, this.outputSampleRate);        let sampleBits = Math.min(this.inputSampleBits, this.oututSampleBits);        let bytes = this.compress();        let dataLength = bytes.length * (sampleBits / 8);        let buffer = new ArrayBuffer(44 + dataLength);        let data = new DataView(buffer);        let channelCount = 1; // 單聲道        let offset = 0;        let writeString = function(str) {            for (let i = 0; i < str.length; i++) {                data.setUint8(offset + i, str.charCodeAt(i));            }        };        // 資源交換文件標(biāo)識符        writeString('RIFF');        offset += 4;        // 下個地址開始到文件尾總字節(jié)數(shù),即文件大小-8        data.setUint32(offset, 36 + dataLength, true);        offset += 4;        // WAV文件標(biāo)志        writeString('WAVE');        offset += 4;        // 波形格式標(biāo)志        writeString('fmt ');        offset += 4;        // 過濾字節(jié),一般為 0x10 = 16        data.setUint32(offset, 16, true);        offset += 4;        // 格式類別 (PCM形式采樣數(shù)據(jù))        data.setUint16(offset, 1, true);        offset += 2;        // 通道數(shù)        data.setUint16(offset, channelCount, true);        offset += 2;        // 采樣率,每秒樣本數(shù),表示每個通道的播放速度        data.setUint32(offset, sampleRate, true);        offset += 4;        // 波形數(shù)據(jù)傳輸率 (每秒平均字節(jié)數(shù)) 單聲道×每秒數(shù)據(jù)位數(shù)×每樣本數(shù)據(jù)位/8        data.setUint32(offset, channelCount * sampleRate * (sampleBits / 8), true);        offset += 4;        // 快數(shù)據(jù)調(diào)整數(shù) 采樣一次占用字節(jié)數(shù) 單聲道×每樣本的數(shù)據(jù)位數(shù)/8        data.setUint16(offset, channelCount * (sampleBits / 8), true);        offset += 2;        // 每樣本數(shù)據(jù)位數(shù)        data.setUint16(offset, sampleBits, true);        offset += 2;        // 數(shù)據(jù)標(biāo)識符        writeString('data');        offset += 4;        // 采樣數(shù)據(jù)總數(shù),即數(shù)據(jù)總大小-44        data.setUint32(offset, dataLength, true);        offset += 4;        // 寫入采樣數(shù)據(jù)        if (sampleBits === 8) {            for (let i = 0; i < bytes.length; i++, offset++) {                const s = Math.max(-1, Math.min(1, bytes[i]));                let val = s < 0 ? s * 0x8000 : s * 0x7fff;                val = parseInt(255 / (65535 / (val + 32768)), 10);                data.setInt8(offset, val, true);            }        } else {            for (let i = 0; i < bytes.length; i++, offset += 2) {                const s = Math.max(-1, Math.min(1, bytes[i]));                data.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);            }        }        return new Blob([data], { type: 'audio/wav' });    }};

// 音頻采集recorder.onaudioprocess = function(e) {    audioData.encode(e.inputBuffer.getChannelData(0));};

this.getBlob = function() {    this.stop();    return audioData.finish();};

this.play = function(func) {    readBlobAsDataURL(this.getBlob(), func);};function readBlobAsDataURL(data, callback) {    let fileReader = new FileReader();    fileReader.onload = function(e) {        callback(e.target.result);    };    fileReader.readAsDataURL(data);}

// 創(chuàng)建analyser節(jié)點(diǎn)，獲取音頻時間和頻率數(shù)據(jù)const analyser = context.createAnalyser();audioInput.connect(analyser);const inputAnalyser = new Uint8Array(1);const wrapEle = $this.refs['wrap'];let ctx = wrapEle.getContext('2d');const width = wrapEle.width;const height = wrapEle.height;const center = {    x: width / 2,    y: height / 2};function drawArc(ctx, color, x, y, radius, beginAngle, endAngle) {    ctx.beginPath();    ctx.lineWidth = 1;    ctx.strokeStyle = color;    ctx.arc(x, y, radius, (Math.PI * beginAngle) / 180, (Math.PI * endAngle) / 180);    ctx.stroke();}(function drawSpectrum() {    analyser.getByteFrequencyData(inputAnalyser); // 獲取頻域數(shù)據(jù)    ctx.clearRect(0, 0, width, height);    // 畫線條    for (let i = 0; i < 1; i++) {        let value = inputAnalyser[i] / 3; // <===獲取數(shù)據(jù)        let colors = [];        if (value <= 16) {            colors = ['#f5A631', '#f5A631', '#e4e4e4', '#e4e4e4', '#e4e4e4', '#e4e4e4'];        } else if (value <= 32) {            colors = ['#f5A631', '#f5A631', '#f5A631', '#f5A631', '#e4e4e4', '#e4e4e4'];        } else {            colors = ['#f5A631', '#f5A631', '#f5A631', '#f5A631', '#f5A631', '#f5A631'];        }        drawArc(ctx, colors[0], center.x, center.y, 52 + 16, -30, 30);        drawArc(ctx, colors[1], center.x, center.y, 52 + 16, 150, 210);        drawArc(ctx, colors[2], center.x, center.y, 52 + 32, -22.5, 22.5);        drawArc(ctx, colors[3], center.x, center.y, 52 + 32, 157.5, 202.5);        drawArc(ctx, colors[4], center.x, center.y, 52 + 48, -13, 13);        drawArc(ctx, colors[5], center.x, center.y, 52 + 48, 167, 193);    }    // 請求下一幀    requestAnimationFrame(drawSpectrum);})();