重要的事情說三遍：要在https下才能實(shí)現(xiàn)敞斋！ 要在https下才能實(shí)現(xiàn)＝赝簟！ 要在https下才能實(shí)現(xiàn)Ｖ采印Ｑ媒狻！
我當(dāng)時就是忽略了這個點(diǎn)折騰了很久焰枢，最后根據(jù)這篇文章：Vue.js實(shí)戰(zhàn)——封裝瀏覽器錄音組件_6蚓峦，實(shí)現(xiàn)了錄音功能。
因?yàn)楸镜厥莌ttp济锄，不能看到效果枫匾，建議使用【whistle】強(qiáng)大的web調(diào)試代理工具來進(jìn)行代理本地，隨時查看修改的效果

因?yàn)樵恼虏荒軖伋鲣浺羰〉腻e誤拟淮，所以在此基礎(chǔ)修改下

//recorder.js
export default class Recorder {
  constructor(stream, config) {
    //兼容
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

    config = config || {};
    config.sampleBits = config.sampleBits || 16;   //采樣數(shù)位 8, 16
    config.sampleRate = config.sampleRate || 8000; //采樣率(1/6 44100)

    this.context = new (window.webkitAudioContext || window.AudioContext)();
    this.audioInput = this.context.createMediaStreamSource(stream);
    this.createScript = this.context.createScriptProcessor || this.context.createJavaScriptNode;
    this.recorder = this.createScript.apply(this.context, [4096, 1, 1]);

    this.audioData = {
      size: 0,          //錄音文件長度
      buffer: [],    //錄音緩存
      inputSampleRate: this.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 () { //合并壓縮
        //合并
        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);
        let length = data.length / compression;
        let result = new Float32Array(length);
        let index = 0, 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++) {
            let s = Math.max(-1, Math.min(1, bytes[i]));
            let val = s < 0 ? s * 0x8000 : s * 0x7FFF;
            val = parseInt(255 / (65535 / (val + 32768)));
            data.setInt8(offset, val, true);
          }
        } else {
          for (let i = 0; i < bytes.length; i++ , offset += 2) {
            let 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' });
      }
    };
  }

  //開始錄音
  start () {
    this.audioInput.connect(this.recorder);
    this.recorder.connect(this.context.destination);

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

  //停止
  stop () {
    this.recorder.disconnect();
  };

  //獲取音頻文件
  getBlob () {
    this.stop();
    return this.audioData.encodeWAV();
  };

  //回放
  play (audio) {
    audio.src = window.URL.createObjectURL(this.getBlob());
  };

  //清理緩存的錄音數(shù)據(jù)
  clear (audio) {
    this.audioData.buffer = [];
    this.audioData.size = 0;
    audio.src = ''
  };

  static checkError (e) {
    const { name } = e;
    let errorMsg = ''
    switch (name) {
      case 'AbortError': errorMsg = '錄音設(shè)備無法被使用'; break;
      case 'NotAllowedError': errorMsg = '用戶已禁止網(wǎng)頁調(diào)用錄音設(shè)備'; break;
      case 'PermissionDeniedError': errorMsg = '用戶已禁止網(wǎng)頁調(diào)用錄音設(shè)備'; break;     // 用戶拒絕
      case 'NotFoundError': errorMsg = '錄音設(shè)備未找到'; break;
      case 'DevicesNotFoundError': errorMsg = '錄音設(shè)備未找到'; break;
      case 'NotReadableError': errorMsg = '錄音設(shè)備無法使用'; break;
      case 'NotSupportedError': errorMsg = '不支持錄音功能'; break;
      case 'MandatoryUnsatisfiedError': errorMsg = '無法發(fā)現(xiàn)指定的硬件設(shè)備'; break;
      default: errorMsg = '錄音調(diào)用錯誤'; break;
    }
    return { error: errorMsg }
  };

  static get (callback, config) {
    if (callback) {
      if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then((stream) => {
          let rec = new Recorder(stream, config);
          callback(rec);
        }).catch((e) => {
          callback(Recorder.checkError(e));
        })
      } else {
        navigator.getUserMedia({ audio: true, video: false }).then((stream) => {
          let rec = new Recorder(stream, config);
          callback(rec);
        }).catch((e) => {
          // Recorder.checkError(e)
          callback(Recorder.checkError(e));
        })
      }
    }
  };
}

//record-sdk.js
import Recorder from "./recorder";
export default class Record {
  startRecord (param) {
    let self = this;
    try {
      Recorder.get(rec => {
        if (rec.error) return param.error(rec.error);
        self.recorder = rec;
        self.recorder.start();
        param.success("開始錄音");
      })
    } catch (e) {
      param.error("開始錄音失敗" + e);
    }
  }

  stopRecord (param) {
    let self = this;
    try {
      let blobData = self.recorder.getBlob();
      param.success(blobData);
    } catch (e) {
      param.error("結(jié)束錄音失敗" + e);
    }
  }

  play (audio) {
    let self = this;
    try {
      self.recorder.play(audio);
    } catch (e) {
      console.error("錄音播放失敗" + e);
    }
  }

  clear (audio) {
    let self = this;
    try {
      self.recorder.clear(audio);
    } catch (e) {
      console.error("清空錄音失敗" + e);
    }
  }
}

//voice.vue
...
  <div class="record">
      <h1>{{tipMsg}}</h1>
      <button @click="onStartVoice">開始</button>
      <button @click="onEndVoice">結(jié)束</button>
      <button @click="onPlayAudio">播放</button>
      <div class="record-play"
           v-show="isFinished">
        <h2>Current voice player is:</h2>
        <audio id="audioVoice"
               controls
               autoplay></audio>
      </div>
    </div>
...
<script>
import Record from '@/plugins/recorder/record-sdk';
export default {
  data () {
    return {
      isVoice: false,
      isFinished: false,
      tipMsg: '錄音',
      audio: "",
      recorder: new Record()
    }
  },
 methods: {
     // 開始錄音
    onStartVoice () {
      this.onStopAudio()
      this.isFinished = false;
      this.recorder.startRecord({
        success: res => {
          this.isVoice = true
        },
        error: e => {
          this.isVoice = false
          this.$toast(e)
        }
      });
    },

    // 結(jié)束錄音
    onEndVoice () {
      this.isFinished = false;
      this.recorder.stopRecord({
        success: res => {
          this.isVoice = false
          //此處可以獲取音頻源文件(res)，用于上傳等操作
          console.log('音頻源文件', res)
        },
        error: e => {
          this.isVoice = false
        }
      });
    },

    // 播放錄音
    onPlayAudio () {
      this.isVoice = false
      this.isFinished = true;
      this.audio = document.getElementById("audioVoice");
      this.recorder.play(this.audio);
    },

    // 停止播放錄音
    onStopAudio () {
      this.recorder.clear(this.audio);
    }
  }
}
</script>

因?yàn)轫?xiàng)目可能要實(shí)現(xiàn)語音錄菜功能妇穴，便提前看下h5是否可以錄音隶债，如果后期真要實(shí)現(xiàn)語音錄菜功能,死讹，再來更新