效果：保存录音，存入vuex仓库中，再次进入调取store中的音频文件，展示在聊天界面上
    问题：存储到了音频文件，却没有找到播放插件中的使用该音频的方式，
    解决：在看了audio标签后发现链接是src导入音频，但是直接导入失败，我认为这个导入失败是因为文件格式不一致，如何确定这个文件格式，必须要去看这个播放插件的js的内容，这是一个可以解决诸多问题的一种方法，以后要经常使用，通过这次成功也算是一种自我突破，我发现了他的play方法中对音频文件进行了src的适配调整，window.URL.createObjectURL()
    插件：import Record from ‘../../views/social/recorder-sdk’;

    1.  fuyanyuyin(){
    2.              var d =this.$store.state.yuyins
    3.              if (d.length>0) {
    4.                  for (let u = 0; u < d.length; u++) {
    5.                      this.vnumber++
    6.                      if (this.vnumber>0) {
    7.                     var p =window.URL.createObjectURL(d[u])
    8.                     console.log(p);
    9.                              var $editor = $(".J__wcEditor"), _editor = $editor[0];
    10.               var $chatMsgList = $("#J__chatMsgList");
    11.                 var html = $editor.html();
    12.                 var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
    13.                 html = html.replace(reg, "<a href='$1$2'>$1$2</a>");
    14.                 var msgTpl = [
    15.                     '<li class="others">\
    16.                             <a class="avatar"><img src="https://img0.baidu.com/it/u=3320986191,3417780337&fm=26&fmt=auto&gp=0.jpg" /></a>\
    17.                             <div class="content">\
    18.                             <p class="author">志愿者</p>\
    19.                                   <div class="record-play">\
    20.         <audio src="'+p+'"\
    21.         id="audioVoice'+this.videonumber+'"\
    22.                controls\
    23.                preload="auto"></audio>\
    24.       </div>\
    25.                             </div>\
    26.                             </li>'
    27.                 ].join("");
    28.                 $chatMsgList.append(msgTpl);
    30.                 $(".wc__chatMsg-panel").animate({scrollTop: $("#J__chatMsgList").height()}, 0);
    32.                      }
    33.                  }
    34.              }
    35.          },

    发送录音

    1.      // 开始录音
    2.     onStartVoice () {
    3.     //   this.onStopAudio()
    4.       this.isFinished = false;
    5.       this.recorder.startRecord({
    6.         success: res => {
    7.           this.isVoice = true
    8.         },
    9.         error: e => {
    10.           this.isVoice = false
    11.           this.$toast(e)
    12.         }
    13.       });
    14.     },
    16.     // 结束录音
    17.     onEndVoice () {
    18.       this.isFinished = false;
    19.       this.recorder.stopRecord({
    20.         success: res => {
    21.           this.isVoice = false
    22.           //此处可以获取音频源文件(res)，用于上传等操作
    23.           console.log('音频源文件', res)
    24.           this.$store.commit('yuyinsnum',res)
    25.         },
    26.         error: e => {
    27.           this.isVoice = false
    28.         }
    29.       });
    30.     },
    32.     // 播放录音
    33.     onPlayAudio () {
    34.         this.videonumber++
    35.         if (this.videonumber>0) {
    36.                 var $editor = $(".J__wcEditor"), _editor = $editor[0];
    37.               var $chatMsgList = $("#J__chatMsgList");
    38.                 var html = $editor.html();
    39.                 var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
    40.                 html = html.replace(reg, "<a href='$1$2'>$1$2</a>");
    41.                     var nowtime =dayjs().format('YYYY-MM-DD HH:mm:ss')
    42.                 var msgTpl = [
    43.                     '<li class="time"><span>'+nowtime+'</span></li>\
    44.                     <li class="me" >\
    45.                             <div class="content">\
    46.                                 <p class="author">志愿者</p>\
    47.                                   <div class="record-play">\
    48.         <audio id="audioVoice'+this.videonumber+'"\
    49.                controls\
    50.                autoplay></audio>\
    51.       </div>\
    52.                             </div>\
    53.                             <a class="avatar" ><img src="https://img0.baidu.com/it/u=3320986191,3417780337&fm=26&fmt=auto&gp=0.jpg" /></a>\
    54.                         </li>'
    55.                 ].join("");
    56.                 $chatMsgList.append(msgTpl);
    57.                 $(".wc__chatMsg-panel").animate({scrollTop: $("#J__chatMsgList").height()}, 0);
    59.       this.isVoice = false
    60.       this.isFinished = true;
    61.       var VideoId ='audioVoice'+this.videonumber
    62.       this.audio = document.getElementById(VideoId);
    63.       this.recorder.play(this.audio);
    64.         }
    66.     },
    68.     // 停止播放录音
    69.     onStopAudio () {
    70.       this.recorder.clear(this.audio);
    71.     }
    72.   },

    image.png