录音音波图功能。

package.json

@@ -21,7 +21,7 @@
     "element-ui": "^2.13.2",
     "he-tree-vue": "^2.0.10",
     "jquery": "^3.6.0",
-    "js-audio-recorder": "^1.0.7",
+    "js-audio-recorder": "^0.5.7",
     "js-base64": "^3.6.1",
     "js-cookie": "2.2.0",
     "js-md5": "^0.7.3",

src/components/Adult/preview/Voicefullscreen.vue

@@ -11,7 +11,7 @@
           :class="[isTopShow ? 'voicefull-top-show' : 'voicefull-top-hidden']"
         >
           <div class="top-left">
-            <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
+            <!-- <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
               <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
                 <span
                   :class="['bg-green', bgIndex == 1 ? 'active' : '']"
@@ -24,7 +24,7 @@
                   @click="changeBg(0)"
                 ></span>
               </div>
-            </div>
+            </div> -->
             <div
               :class="[
                 'set-fontSize',
@@ -515,8 +515,50 @@
         </div>
       </div>
       <div class="waveform-wrapper">
-        <div id="waveform_big" ref="waveform_big" />
-        <div id="timeline" ref="timeline"></div>
+        <div class="big" @click="selepaly('yp')">
+          <div
+            :class="[playList.indexOf('yp') != -1 ? 'play_erji' : 'erji']"
+            v-if="LYstatus != '未开始'"
+          >
+            <template v-if="playList.indexOf('yp') != -1">
+              <img src="../../../assets/NPC/qp-erji-sele.png" alt="" />
+            </template>
+            <template v-else>
+              <img src="../../../assets/NPC/qp-erji.png" alt="" />
+            </template>
+          </div>
+          <div class="big_dv2">
+            <div id="waveform_big" ref="waveform_big" />
+            <div id="timeline" ref="timeline"></div>
+          </div>
+        </div>
+
+        <!-- <template v-show="startLyShow"> -->
+        <!-- <div id="waveform_ly" ref="waveform_ly" />
+          <div id="timeline_ly" ref="timeline_ly"></div> -->
+        <div class="big ly" @click="selepaly('ly')">
+          <div
+            :class="[playList.indexOf('ly') != -1 ? 'play_erji' : 'erji']"
+            v-if="LYstatus != '未开始'"
+          >
+            <template v-if="playList.indexOf('ly') != -1">
+              <img src="../../../assets/NPC/qp-erji-sele.png" alt="" />
+            </template>
+            <template v-else>
+              <img src="../../../assets/NPC/qp-erji.png" alt="" />
+            </template>
+          </div>
+          <div class="big_dv2">
+            <canvas id="canvas" style="display: none; height: 134px"></canvas>
+            <canvas
+              id="playChart"
+              style="display: none; height: 134px"
+            ></canvas>
+          </div>
+        </div>
+
+        <!-- </template> -->
+
         <div id="waveform" ref="waveform" style="margin-top: 20px" />
       </div>
       <div class="voicefull-bottom">
@@ -535,7 +577,7 @@
               TaskModel == 'ANSWER' ? 'bottom-left-margin' : '',
             ]"
           >
-            <Soundrecorddiff
+            <!-- <Soundrecorddiff
               ref="Soundrecorddiff"
               @handleWav="handleWav"
               @getWavblob="getWavblob"
@@ -574,7 +616,43 @@
                 :getPlayStatus="getPlayStatus"
                 :key="'mp3Compare' + curSentIndex"
               />
-            </div>
+            </div> -->
+            <template v-if="LYstatus == '未开始' || LYstatus == '已结束'">
+              <img
+                @click="startLY"
+                src="../../../assets/NPC/qp-ly-start.png"
+                alt=""
+              />
+            </template>
+            <template v-else-if="LYstatus == '录音中'">
+              <img
+                @click="stopLY"
+                src="../../../assets/NPC/qp-ly-stop.png"
+                alt=""
+                style="margin-right: 20px"
+              />
+              <img
+                @click="endLY"
+                src="../../../assets/NPC/qp-ly-end.png"
+                alt=""
+              />
+            </template>
+            <template v-else-if="LYstatus == '暂停中'">
+              <img
+                @click="goonLY"
+                src="../../../assets/NPC/qp-ly-jx.png"
+                alt=""
+                style="margin-right: 20px"
+              />
+              <img
+                @click="endLY"
+                src="../../../assets/NPC/qp-ly-end.png"
+                alt=""
+              />
+            </template>
+            <template v-else>
+              <span @click="playLY"> 播放录音 </span>
+            </template>
           </div>
           <div>
             <div class="cuttentime">{{ ShowcurentTime }}</div>
@@ -648,6 +726,7 @@ import Soundrecorddiff from "./Soundrecorddiff.vue";
 import AudioCompare from "./AudioCompare.vue";
 import Wordcard from "./components/Wordcard.vue";
 import { LearnWebSI, WebFileDownload } from "../../../api/ajax";
+import Recorder from "js-audio-recorder"; // 录音插件
 
 import WaveSurfer from "wavesurfer.js";
 import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";
@@ -673,10 +752,17 @@ export default {
   ],
   data() {
     return {
+      playList: [],
+      recorder: new Recorder({
+        sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
+        sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
+        numChannels: 1, // 声道，支持 1 或 2， 默认是1
+        compiling: true,
+      }),
       pySize: 32,
       hzSize: 48,
       enSize: 24,
-      bgIndex: 1,
+      bgIndex: 0,
       maxTime: 0,
       item: null,
       bg: 0,
@@ -741,9 +827,20 @@ export default {
       screenHeight: 0,
       wavesurfer: null,
       wavesurfer_big: null,
+      wavesurfer_ly: null,
       loading: null,
       timer: null,
       ShowcurentTime: 0,
+      LYstatus: "未开始",
+      startLyShow: false,
+      //波浪图-录音
+      drawRecordId: null,
+      oCanvas: null,
+      ctx: null,
+      //波浪图-播放
+      drawPlayId: null,
+      pCanvas: null,
+      pCtx: null,
     };
   },
   computed: {
@@ -810,6 +907,356 @@ export default {
   },
   //方法集合
   methods: {
+    selepaly(type) {
+      if (this.LYstatus == "未开始") {
+        return;
+      }
+      let index = this.playList.indexOf(type);
+      if (index != -1) {
+        this.playList.splice(index, 1);
+      } else {
+        this.playList.push(type);
+      }
+    },
+    startCanvas() {
+      //录音波浪
+      this.oCanvas = document.getElementById("canvas");
+      this.ctx = this.oCanvas.getContext("2d");
+      //播放波浪
+      this.pCanvas = document.getElementById("playChart");
+      this.pCtx = this.pCanvas.getContext("2d");
+    },
+    initaudioImage() {
+      this.loading = true;
+      this.wavesurfer = WaveSurfer.create({
+        container: this.$refs.waveform,
+        barWidth: 1,
+        progressColor: "#000000",
+        backend: "MediaElement",
+        waveColor: "#000000",
+        cursorColor: "#1370F6",
+        cursorWidth: 3,
+        barHeight: 0.8,
+        barGap: 6,
+        height: 44,
+        width: 400,
+        interact: false,
+      });
+      this.wavesurfer_big = WaveSurfer.create({
+        container: this.$refs.waveform_big,
+        barWidth: 1,
+        progressColor: "#000000",
+        backend: "MediaElement",
+        waveColor: "#000000",
+        cursorColor: "#1370F6",
+        cursorWidth: 3,
+        barHeight: 0.8,
+        barGap: 6,
+        height: 300,
+        width: 400,
+        interact: false,
+        plugins: [
+          Timeline.create({
+            container: "#timeline",
+            primaryColor: "#c0c0c0",
+            secondaryColor: "#c0c0c0",
+            primaryFontColor: "#c0c0c0",
+            secondaryFontColor: "#c0c0c0",
+            formatTimeCallback: this.formatTimeCallback,
+            timeInterval: 0.025,
+            primaryLabelInterval: 4,
+            secondaryLabelInterval: 400,
+            notchPercentHeight: 40,
+          }),
+        ],
+      });
+      // this.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,
+      }).then((res) => {
+        const objectUrl = window.URL.createObjectURL(res);
+        this.wavesurfer.load(objectUrl);
+        this.wavesurfer_big.load(objectUrl);
+        let start = this.bg / 1000;
+        let end = this.ed / 1000;
+        that.wavesurfer.on("ready", function (e) {
+          that.wavesurfer.play(start, end);
+          that.loading = false;
+          that.wavesurfer.zoom(Number(0.001));
+        });
+        that.wavesurfer_big.on("ready", function (e) {
+          that.wavesurfer_big.play(start, end);
+          that.loading = false;
+          that.wavesurfer_big.zoom(Number(600));
+          that.wavesurfer_big.setMute(true);
+        });
+      });
+      that.wavesurfer.on("play", function (e) {
+        that.isPlaying = true;
+      });
+      that.wavesurfer.on("pause", function (e) {
+        that.isPlaying = false;
+      });
+      that.wavesurfer.on("click", function (e) {
+        console.log(e);
+      });
+      that.wavesurfer.on("audioprocess", function (e) {
+        that.curTime = e * 1000;
+        let time = e.toFixed(2);
+        let arr = time.split(".");
+        let newtime = "";
+        arr.forEach((item, i) => {
+          if (item.length == 1) {
+            item = "0" + item;
+          }
+          if (i == 0) {
+            newtime += item + ":";
+          } else {
+            newtime += item;
+          }
+        });
+        that.ShowcurentTime = newtime;
+      });
+    },
+    formatTimeCallback(seconds, pxPerSec) {
+      seconds = Number(seconds);
+      let minutes = Math.floor(seconds / 60);
+      seconds = seconds % 60;
+
+      // fill up seconds with zeroes
+      let secondsStr = Math.round(seconds).toString();
+      if (pxPerSec >= 25 * 10) {
+        secondsStr = seconds.toFixed(2);
+      } else if (pxPerSec >= 25 * 1) {
+        secondsStr = seconds.toFixed(1);
+      }
+
+      if (minutes > 0) {
+        if (seconds < 10) {
+          secondsStr = "0" + secondsStr;
+        }
+        return `${minutes}:${secondsStr}`;
+      }
+      return secondsStr;
+    },
+    /**
+     * 绘制波浪图-录音
+     * */
+    drawRecord() {
+      let node = document.getElementById("waveform_big");
+      node.children[0].style.height = "134px";
+      // 用requestAnimationFrame稳定60fps绘制
+      this.oCanvas.style.display = "block";
+      this.oCanvas.style.width = "100%";
+      // 用requestAnimationFrame稳定60fps绘制
+      this.drawRecordId = requestAnimationFrame(this.drawRecord);
+
+      // 实时获取音频大小数据
+      let dataArray = this.recorder.getRecordAnalyseData(),
+        bufferLength = dataArray.length;
+
+      // 填充背景色
+      this.ctx.fillStyle = "#F3F3F4";
+      this.ctx.fillRect(0, 0, this.oCanvas.width, this.oCanvas.height);
+
+      // 设定波形绘制颜色
+      this.ctx.lineWidth = 2;
+      this.ctx.strokeStyle = "rgb(0, 0, 0)";
+
+      this.ctx.beginPath();
+
+      var sliceWidth = (this.oCanvas.width * 1.0) / bufferLength, // 一个点占多少位置，共有bufferLength个点要绘制
+        x = 0; // 绘制点的x轴位置
+
+      for (var i = 0; i < bufferLength; i++) {
+        var v = dataArray[i] / 128.0;
+        var y = (v * this.oCanvas.height) / 2;
+
+        if (i === 0) {
+          // 第一个点
+          this.ctx.moveTo(x, y);
+        } else {
+          // 剩余的点
+          this.ctx.lineTo(x, y);
+        }
+        // 依次平移，绘制所有点
+        x += sliceWidth;
+      }
+
+      this.ctx.lineTo(this.oCanvas.width, this.oCanvas.height / 2);
+      this.ctx.stroke();
+    },
+    /**
+     * 绘制波浪图-播放
+     * */
+    drawPlay() {
+      // 用requestAnimationFrame稳定60fps绘制
+      this.drawPlayId = requestAnimationFrame(this.drawPlay);
+      this.pCanvas.style.display = "block";
+      this.oCanvas.style.display = "none";
+      this.pCanvas.style.width = "100%";
+
+      // 实时获取音频大小数据
+      let dataArray = this.recorder.getPlayAnalyseData(),
+        bufferLength = dataArray.length;
+
+      // 填充背景色
+      this.pCtx.fillStyle = "#F3F3F4";
+      this.pCtx.fillRect(0, 0, this.pCanvas.width, this.pCanvas.height);
+
+      // 设定波形绘制颜色
+      this.pCtx.lineWidth = 2;
+      this.pCtx.strokeStyle = "rgb(0, 0, 0)";
+
+      this.pCtx.beginPath();
+
+      var sliceWidth = (this.pCanvas.width * 1.0) / bufferLength, // 一个点占多少位置，共有bufferLength个点要绘制
+        x = 0; // 绘制点的x轴位置
+
+      for (var i = 0; i < bufferLength; i++) {
+        var v = dataArray[i] / 128.0;
+        var y = (v * this.pCanvas.height) / 2;
+
+        if (i === 0) {
+          // 第一个点
+          this.pCtx.moveTo(x, y);
+        } else {
+          // 剩余的点
+          this.pCtx.lineTo(x, y);
+        }
+        // 依次平移，绘制所有点
+        x += sliceWidth;
+      }
+
+      this.pCtx.lineTo(this.pCanvas.width, this.pCanvas.height / 2);
+      this.pCtx.stroke();
+    },
+    initLyAudioImage(url) {
+      this.startLyShow = true;
+      let node = document.getElementById("waveform_big");
+      node.children[0].style.height = "134px";
+      // let lynode = document.getElementById("waveform_ly");
+      // lynode.children[0].style.height = "134px";
+      // this.wavesurfer_ly.load(url);
+      // 用requestAnimationFrame稳定60fps绘制
+      this.oCanvas.style.height = "134px";
+      this.pCanvas.style.height = "134px";
+
+      this.drawRecordId = requestAnimationFrame(this.initLyAudioImage);
+
+      // 实时获取音频大小数据
+      let dataArray = this.recorder.getRecordAnalyseData(),
+        bufferLength = dataArray.length;
+      // 填充背景色
+      this.ctx.fillStyle = "rgb(200, 200, 200)";
+      this.ctx.fillRect(0, 0, this.oCanvas.width, this.oCanvas.height);
+      // 设定波形绘制颜色
+      this.ctx.lineWidth = 2;
+      this.ctx.strokeStyle = "rgb(0, 0, 0)";
+
+      this.ctx.beginPath();
+
+      var sliceWidth = (this.oCanvas.width * 1.0) / bufferLength, // 一个点占多少位置，共有bufferLength个点要绘制
+        x = 0; // 绘制点的x轴位置
+
+      for (var i = 0; i < bufferLength; i++) {
+        var v = dataArray[i] / 128.0;
+        var y = (v * this.oCanvas.height) / 2;
+
+        if (i === 0) {
+          // 第一个点
+          this.ctx.moveTo(x, y);
+        } else {
+          // 剩余的点
+          this.ctx.lineTo(x, y);
+        }
+        // 依次平移，绘制所有点
+        x += sliceWidth;
+      }
+
+      this.ctx.lineTo(this.oCanvas.width, this.oCanvas.height / 2);
+      this.ctx.stroke();
+    },
+    // 播放录音
+    playLY() {
+      this.recorder.play();
+      this.drawPlay(); //绘制波浪图
+    },
+    // 开始录音
+    startLY() {
+      this.recorder.start().then(() => {
+        this.drawRecord();
+      });
+      this.LYstatus = "录音中";
+      // let timer = setInterval(() => {
+      //   let newData = this.recorder.getNextData();
+      //   // let byteLength = newData[0].byteLength;
+      //   // let buffer = new ArrayBuffer(newData.length * byteLength);
+      //   // let dataView = new DataView(buffer);
+      //   // // 数据合并
+      //   // for (let i = 0, iLen = newData.length; i < iLen; ++i) {
+      //   //   for (let j = 0, jLen = newData[i].byteLength; j < jLen; ++j) {
+      //   //     dataView.setInt8(i * byteLength + j, newData[i].getInt8(j));
+      //   //   }
+      //   // }
+      //   if (newData.length > 0) {
+      //     const blob = new Blob(newData);
+      //     const objectUrl = window.URL.createObjectURL(blob);
+      //     this.initLyAudioImage(objectUrl);
+      //   } else {
+      //     clearInterval(timer);
+      //     timer = null;
+      //   }
+      // }, 1000);
+    },
+    // 暂停录音
+    stopLY() {
+      this.recorder.pause();
+      this.LYstatus = "暂停中";
+      this.drawRecordId && cancelAnimationFrame(this.drawRecordId);
+      this.drawRecordId = null;
+    },
+    // 继续录音
+    goonLY() {
+      this.recorder.resume();
+      this.LYstatus = "录音中";
+      this.drawRecord(); //绘制波浪图
+    },
+    // 结束录音
+    endLY() {
+      this.recorder.stop();
+      this.LYstatus = "已结束";
+      this.drawRecordId && cancelAnimationFrame(this.drawRecordId);
+      this.drawRecordId = null;
+    },
     setTopShow(bool) {
       this.isTopShow = bool;
     },
@@ -1204,152 +1651,30 @@ export default {
       this.screenHeight = window.innerHeight;
     },
     playMusic() {
-      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)();
-      }
-    },
-    initaudioImage() {
-      this.loading = true;
-      this.wavesurfer = WaveSurfer.create({
-        container: this.$refs.waveform,
-        barWidth: 1,
-        progressColor: "#000000",
-        backend: "MediaElement",
-        waveColor: "#000000",
-        cursorColor: "#1370F6",
-        cursorWidth: 3,
-        barHeight: 0.8,
-        barGap: 6,
-        height: 44,
-        width: 400,
-        interact: false,
-      });
-      this.wavesurfer_big = WaveSurfer.create({
-        container: this.$refs.waveform_big,
-        barWidth: 1,
-        progressColor: "#000000",
-        backend: "MediaElement",
-        waveColor: "#000000",
-        cursorColor: "#1370F6",
-        cursorWidth: 3,
-        barHeight: 0.8,
-        barGap: 6,
-        height: 308,
-        width: 400,
-        interact: false,
-        plugins: [
-          Timeline.create({
-            container: "#timeline",
-            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,
-      }).then((res) => {
-        const objectUrl = window.URL.createObjectURL(res);
-        this.wavesurfer.load(objectUrl);
-        this.wavesurfer_big.load(objectUrl);
+      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;
-        that.wavesurfer.on("ready", function (e) {
-          that.wavesurfer.play(start, end);
-          that.loading = false;
-          that.wavesurfer.zoom(Number(0.001));
-        });
-        that.wavesurfer_big.on("ready", function (e) {
-          that.wavesurfer_big.play(start, end);
-          that.loading = false;
-          that.wavesurfer_big.zoom(Number(600));
-          that.wavesurfer_big.setMute(true);
-        });
-      });
-      that.wavesurfer.on("play", function (e) {
-        that.isPlaying = true;
-      });
-      that.wavesurfer.on("pause", function (e) {
-        that.isPlaying = false;
-      });
-      that.wavesurfer.on("click", function (e) {
-        console.log(e);
-      });
-      that.wavesurfer.on("audioprocess", function (e) {
-        that.curTime = e * 1000;
-        let time = e.toFixed(2);
-        let arr = time.split(".");
-        let newtime = "";
-        arr.forEach((item, i) => {
-          if (item.length == 1) {
-            item = "0" + item;
-          }
-          if (i == 0) {
-            newtime += item + ":";
-          } else {
-            newtime += item;
-          }
-        });
-        that.ShowcurentTime = newtime;
-      });
-
-      // that.timer = setInterval(() => {
-      //   let time = that.wavesurfer.getCurrentTime().toFixed(2);
-      //   let arr = time.split(".");
-      //   let newtime = "";
-      //   arr.forEach((item, i) => {
-      //     if (item.length == 1) {
-      //       item = "0" + item;
-      //     }
-      //     if (i == 0) {
-      //       newtime += item + ":";
-      //     } else {
-      //       newtime += item;
-      //     }
-      //   });
-      //   that.curentTime = newtime;
-      // }, 1000);
-    },
-    formatTimeCallback(seconds, pxPerSec) {
-      seconds = Number(seconds);
-      let minutes = Math.floor(seconds / 60);
-      seconds = seconds % 60;
-
-      // fill up seconds with zeroes
-      let secondsStr = Math.round(seconds).toString();
-      if (pxPerSec >= 25 * 10) {
-        secondsStr = seconds.toFixed(2);
-      } else if (pxPerSec >= 25 * 1) {
-        secondsStr = seconds.toFixed(1);
-      }
-
-      if (minutes > 0) {
-        if (seconds < 10) {
-          secondsStr = "0" + secondsStr;
+        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)();
         }
-        return `${minutes}:${secondsStr}`;
       }
-      return secondsStr;
+      if (LYindex != -1) {
+        this.playLY();
+      }
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
+    this.startCanvas();
     this.initaudioImage();
     let _this = this;
     $(window).resize(() => {
@@ -1448,6 +1773,49 @@ export default {
 </script>
 <style lang='scss' scoped>
 //@import url(); 引入公共css类
+.waveform-wrapper {
+  .big {
+    display: flex;
+    .big_dv2 {
+      flex: 1;
+    }
+  }
+  .ly {
+    .play_erji {
+      margin-top: 0;
+    }
+    .erji {
+      margin-top: 0;
+    }
+  }
+  .play_erji {
+    margin-top: 16px;
+    width: 64px;
+    height: 134px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #4f92f6;
+    img {
+      width: 28px;
+      height: 28px;
+    }
+  }
+  .erji {
+    margin-top: 16px;
+    width: 64px;
+    height: 134px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #ffffff;
+    img {
+      width: 28px;
+      height: 28px;
+    }
+  }
+}
+
 #waveform_big {
   margin-top: 16px;
   background: #f3f3f48e;
@@ -2017,6 +2385,12 @@ export default {
       display: flex;
       justify-content: flex-start;
       align-items: center;
+      padding-left: 40px;
+      > img {
+        width: 72px;
+        height: 48px;
+        cursor: pointer;
+      }
       &-margin {
         margin-left: 40px;
       }