完善录音

src/components/Adult/preview/Voicefullscreen.vue

@@ -684,14 +684,14 @@
             <div class="operate">
               <img
                 v-show="isPlaying"
-                @click="playMusic"
+                @click="playMusic('pause')"
                 src="../../../assets/NPC/pause-fill.png"
                 alt=""
                 style="width: 16px; height: 24px"
               />
               <img
                 v-show="!isPlaying"
-                @click="playMusic"
+                @click="playMusic('play')"
                 src="../../../assets/NPC/play-fill.png"
                 alt=""
                 style="width: 21px; height: 24px"
@@ -928,7 +928,7 @@ export default {
           // wavesurfer_ly.load(objectUrl);
           // lyData.buffers = buffers;
           // lyData.bufferSampleRate = bufferSampleRate;
-          wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate); //输入音频数据，更新显示波形
+          // wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate); //输入音频数据，更新显示波形
           //录音实时回调，大约1秒调用12次本回调，buffers为开始到现在的所有录音pcm数据块(16位小端LE)
           //可实时绘制波形（extensions目录内的waveview.js、wavesurfer.view.js、frequency.histogram.view.js插件功能）
           //可利用extensions/sonic.js插件实时变速变调，此插件计算量巨大，onProcess需要返回true开启异步模式
@@ -1145,34 +1145,6 @@ export default {
           }),
         ],
       });
-      // wavesurfer_ly = WaveSurfer.create({
-      //   container: this.$refs.waveform_ly,
-      //   barWidth: 1,
-      //   progressColor: "#FF5C5C",
-      //   backend: "MediaElement",
-      //   waveColor: "#FF5C5C",
-      //   cursorColor: "#1370F6",
-      //   cursorWidth: 3,
-      //   barHeight: 0.8,
-      //   barGap: 6,
-      //   height: 0,
-      //   width: 400,
-      //   interact: false,
-      //   plugins: [
-      //     Timeline.create({
-      //       container: "#timeline_ly",
-      //       primaryColor: "#c0c0c0",
-      //       secondaryColor: "#c0c0c0",
-      //       primaryFontColor: "#c0c0c0",
-      //       secondaryFontColor: "#c0c0c0",
-      //       formatTimeCallback: this.formatTimeCallback,
-      //       timeInterval: 0.025,
-      //       primaryLabelInterval: 4,
-      //       secondaryLabelInterval: 400,
-      //       notchPercentHeight: 40,
-      //     }),
-      //   ],
-      // });
       let that = this;
       WebFileDownload({
         FileID: this.curQue.mp3_list[0].file_id,
@@ -1369,14 +1341,23 @@ export default {
     playLY() {
       let node = document.getElementById("ly_audio");
       if (node) {
-        stream.input(lyData.buffers[lyData.buffers.length - 1],lyData.bufferSampleRate);
+        stream.input(
+          lyData.buffers[lyData.buffers.length - 1],
+          lyData.bufferSampleRate
+        );
         node.play();
       }
-      // wavesurfer_ly.play();
+      wavesurfer_ly.play();
       // this.drawPlay(); //绘制波浪图
     },
+    // 暂停播放
+    stopPlay() {
+      this.wavesurfer.pause();
+      this.wavesurfer_big.pause();
+    },
     // 开始录音
     startLY() {
+      this.stopPlay();
       let node = document.getElementById("waveform_big");
       node.children[0].style.height = "130px";
       let lynode = document.getElementById("ly_big");
@@ -1389,24 +1370,24 @@ export default {
       // this.initLyAudioImage();
       _this.recorder.open(
         function () {
-          wave = Recorder.WaveSurferView({
-            elem: ".elem",
-            keep: true,
-            lineCount: 70,
-            position: 0,
-            minHeight: 1,
-            stripeEnable: false,
-            linear: [0, "#000", 1, "#000"],
-            // linear: [
-            //   0,
-            //   "rgba(0,0,0,1)",
-            //   0.7,
-            //   "rgba(0,0,0,1)",
-            //   1,
-            //   "rgba(0,0,0,1)",
-            // ],
-            centerColor: "",
-          });
+          // wave = Recorder.WaveSurferView({
+          //   elem: ".elem",
+          //   keep: true,
+          //   lineCount: 70,
+          //   position: 0,
+          //   minHeight: 1,
+          //   stripeEnable: false,
+          //   linear: [0, "#000", 1, "#000"],
+          //   // linear: [
+          //   //   0,
+          //   //   "rgba(0,0,0,1)",
+          //   //   0.7,
+          //   //   "rgba(0,0,0,1)",
+          //   //   1,
+          //   //   "rgba(0,0,0,1)",
+          //   // ],
+          //   centerColor: "",
+          // });
           //打开麦克风授权获得相关资源
           //dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消
           _this.recorder.start(); //此处可以立即开始录音，但不建议这样编写，因为open是一个延迟漫长的操作，通过两次用户操作来分别调用open和start是推荐的最佳流程
@@ -1427,6 +1408,7 @@ export default {
     },
     // 继续录音
     goonLY() {
+      this.stopPlay();
       this.recorder.resume();
       this.LYstatus = "录音中";
       // this.drawRecord(); //绘制波浪图
@@ -1443,38 +1425,75 @@ export default {
           );
           _this.recorder.close(); //释放录音资源，当然可以不释放，后面可以连续调用start；但不释放时系统或浏览器会一直提示在录音，最佳操作是录完就close掉
           /*** 【立即播放例子】 ***/
-          
-          // wavesurfer_ly.load((window.URL || webkitURL).createObjectURL(blob));
+
           const objectUrl = window.URL.createObjectURL(blob);
-        _this.wavesurfer.load(objectUrl);
-        _this.wavesurfer_big.load(objectUrl);
-        let start = _this.bg / 1000;
-        let end = _this.ed / 1000;
-        _this.wavesurfer.on("ready", function (e) {
-          _this.wavesurfer.play(start, end);
-          _this.loading = false;
-          _this.wavesurfer.zoom(Number(0.001));
-        });
-        _this.wavesurfer_big.on("ready", function (e) {
-          _this.wavesurfer_big.play(start, end);
-          _this.loading = false;
-          _this.wavesurfer_big.zoom(Number(600));
-          _this.wavesurfer_big.setMute(true);
-        });
-        //   let node = document.getElementById("ly_audio");
-        //   if (node) {
-        //     node.controls = true;
-        //     //简单利用URL生成播放地址，注意不用了时需要revokeObjectURL，否则霸占内存
-        //     node.src = (window.URL || webkitURL).createObjectURL(blob);
-        //   } else {
-        //     var audio = document.createElement("audio");
-        //     audio.controls = true;
-        //     document.body.appendChild(audio);
-        //     //简单利用URL生成播放地址，注意不用了时需要revokeObjectURL，否则霸占内存
-        //     audio.src = (window.URL || webkitURL).createObjectURL(blob);
-        //     audio.id = "ly_audio";
-        //     audio.style.display = "none";
-        //   }
+          wavesurfer_ly = WaveSurfer.create({
+            container: _this.$refs.waveform_ly,
+            barWidth: 1,
+            progressColor: "#FF5C5C",
+            backend: "MediaElement",
+            waveColor: "#FF5C5C",
+            cursorColor: "#1370F6",
+            cursorWidth: 3,
+            barHeight: 0.8,
+            barGap: 6,
+            height: 130,
+            width: 400,
+            interact: false,
+            plugins: [
+              Timeline.create({
+                container: "#timeline_ly",
+                primaryColor: "#c0c0c0",
+                secondaryColor: "#c0c0c0",
+                primaryFontColor: "#c0c0c0",
+                secondaryFontColor: "#c0c0c0",
+                formatTimeCallback: _this.formatTimeCallback,
+                timeInterval: 0.025,
+                primaryLabelInterval: 4,
+                secondaryLabelInterval: 400,
+                notchPercentHeight: 40,
+              }),
+            ],
+          });
+          wavesurfer_ly.load(objectUrl);
+          wavesurfer_ly.on("ready", function (e) {
+            wavesurfer_ly.zoom(Number(600));
+          });
+          wavesurfer_ly.on("play", function (e) {
+            _this.isPlaying = true;
+          });
+          wavesurfer_ly.on("pause", function (e) {
+            _this.isPlaying = false;
+          });
+          // _this.wavesurfer.load(objectUrl);
+          // _this.wavesurfer_big.load(objectUrl);
+          // let start = _this.bg / 1000;
+          // let end = _this.ed / 1000;
+          // _this.wavesurfer.on("ready", function (e) {
+          //   _this.wavesurfer.play(start, end);
+          //   _this.loading = false;
+          //   _this.wavesurfer.zoom(Number(0.001));
+          // });
+          // _this.wavesurfer_big.on("ready", function (e) {
+          //   _this.wavesurfer_big.play(start, end);
+          //   _this.loading = false;
+          //   _this.wavesurfer_big.zoom(Number(600));
+          //   _this.wavesurfer_big.setMute(true);
+          // });
+          //   let node = document.getElementById("ly_audio");
+          //   if (node) {
+          //     node.controls = true;
+          //     //简单利用URL生成播放地址，注意不用了时需要revokeObjectURL，否则霸占内存
+          //     node.src = (window.URL || webkitURL).createObjectURL(blob);
+          //   } else {
+          //     var audio = document.createElement("audio");
+          //     audio.controls = true;
+          //     document.body.appendChild(audio);
+          //     //简单利用URL生成播放地址，注意不用了时需要revokeObjectURL，否则霸占内存
+          //     audio.src = (window.URL || webkitURL).createObjectURL(blob);
+          //     audio.id = "ly_audio";
+          //     audio.style.display = "none";
+          //   }
         },
         function (msg) {
           console.log("录音失败:" + msg);
@@ -1878,34 +1897,48 @@ export default {
     getScreenHeight() {
       this.screenHeight = window.innerHeight;
     },
-    playMusic() {
+    playMusic(type) {
       let YPindex = this.playList.indexOf("yp");
       let LYindex = this.playList.indexOf("ly");
-      if (YPindex != -1) {
-        let time = this.wavesurfer_big.getCurrentTime();
-        let start = this.bg / 1000;
-        let end = this.ed / 1000;
-        if (time * 1000 == this.ed) {
-          this.wavesurfer.play(start, end);
-          this.wavesurfer_big.play(start, end);
-        } else {
-          this.wavesurfer.playPause.bind(this.wavesurfer)();
-          this.wavesurfer_big.playPause.bind(this.wavesurfer)();
+      if (type == "play") {
+        if (YPindex != -1) {
+          let time = this.wavesurfer_big.getCurrentTime();
+          let start = this.bg / 1000;
+          let end = this.ed / 1000;
+          if (time * 1000 == this.ed) {
+            this.wavesurfer.play(start, end);
+            this.wavesurfer_big.play(start, end);
+          } else {
+            this.wavesurfer.playPause.bind(this.wavesurfer)();
+            this.wavesurfer_big.playPause.bind(this.wavesurfer_big)();
+          }
         }
-      }
-      if (LYindex != -1) {
-        this.playLY();
-      }
-      if (LYindex == -1 && YPindex == -1) {
-        let time = this.wavesurfer_big.getCurrentTime();
-        let start = this.bg / 1000;
-        let end = this.ed / 1000;
-        if (time * 1000 == this.ed) {
-          this.wavesurfer.play(start, end);
-          this.wavesurfer_big.play(start, end);
-        } else {
-          this.wavesurfer.playPause.bind(this.wavesurfer)();
-          this.wavesurfer_big.playPause.bind(this.wavesurfer)();
+        if (LYindex != -1) {
+          this.playLY();
+        }
+        if (LYindex == -1 && YPindex == -1) {
+          let time = this.wavesurfer_big.getCurrentTime();
+          let start = this.bg / 1000;
+          let end = this.ed / 1000;
+          if (time * 1000 == this.ed || time * 1000 == 0) {
+            this.wavesurfer.play(start, end);
+            this.wavesurfer_big.play(start, end);
+          } else {
+            this.wavesurfer.play(parseInt(time * 1000), end);
+            this.wavesurfer_big.play(parseInt(time * 1000), end);
+          }
+        }
+      } else {
+        if (YPindex != -1) {
+          this.wavesurfer.pause();
+          this.wavesurfer_big.pause();
+        }
+        if (LYindex != -1) {
+          wavesurfer_ly.pause();
+        }
+        if (LYindex == -1 && YPindex == -1) {
+          this.wavesurfer.pause();
+          this.wavesurfer_big.pause();
         }
       }
     },