task-2810229177954560:audio-record

vusion · Feb 27, 2024 · a9073bf · a9073bf
1 parent f07e373
commit a9073bf
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 25 deletions.
diff --git a/packages/cw/cw_audio_library/components/cw-audio-record/api.yaml b/packages/cw/cw_audio_library/components/cw-audio-record/api.yaml
@@ -15,7 +15,7 @@
       default: 'rgb(0, 0, 0)'
       description: 设定波形绘制颜色
     - name: maxFileSize
-      title: 最大文件大小
+      title: 最大文件大小（MB）
       type: number
       compType: inputNumber
       default: 10
@@ -24,8 +24,13 @@
       title: 上传音频地址
       type: string
       compType: interfaceSelect
-      default:
+      default: '/gateway/lowcode/api/v1/app/upload'
       description: 上传的地址
+    - name: isShowWave
+      title: 是否显示声波
+      type: boolean
+      default: true
+      description: 是否显示声波
   methods:
     - name: startRecord
       title: 开始录制
@@ -68,3 +73,7 @@
           - name: value
             type: string
             description: 错误原因
+  slots:
+    - concept: Slot
+      name: default
+      description: 插入音频录制控制组件
diff --git a/packages/cw/cw_audio_library/components/cw-audio-record/index.vue b/packages/cw/cw_audio_library/components/cw-audio-record/index.vue
@@ -1,6 +1,14 @@
 <template>
-  <div :class="$style.recordRoot" ref="canvasParent">
-    <canvas ref="audioCanvas"></canvas>
+  <div :class="$style.rootRecord">
+    <div :class="$style.canvasParent" ref="canvasParent" v-if="isShowWave">
+      <canvas ref="audioCanvas"></canvas>
+    </div>
+    <div :class="$style.customToolbar" vusion-slot-name="default">
+      <slot></slot>
+      <div v-if="!$slots.default && $env.VUE_APP_DESIGNER" style="color:#ccccccd0;padding: 5px;">
+        请拖入需要的工具按钮
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,6 +19,10 @@ import axios from "axios"
 export default {
   name: "cw-audio-record",
   props: {
+    isShowWave: {
+      type: Boolean,
+      default: true
+    },
     sampleRateOptions: {
       type: Number,
       default: 16000
@@ -38,17 +50,42 @@ export default {
     waveBgColor: {
       type: String,
       default: 'rgb(200, 200, 200)'
-    },
-    urlField: { type: String, default: 'url' },
+    }
   },
   data() {
     return {
+      canvasCtx: null,
+      drawRecordId: null,
       isRecording: false, // 是否正在录音
       duration: 0, // 录音时长
       fileSize: 0, // 文件大小
     };
   },
+  mounted() {
+    this.isShowWave && this.initCanvas();
+  },
   methods: {
+    initCanvas() {
+      cancelAnimationFrame(this.drawRecordId);
+      this.configCanvas();
+    },
+    configCanvas() {
+      const {
+        waveBgColor,
+        waveColor
+      } = this;
+      const parentElement = this.$refs.canvasParent;
+      const canvas = this.$refs.audioCanvas;
+      canvas.width = parentElement.clientWidth;
+      canvas.height = parentElement.clientHeight;
+      this.canvasCtx = canvas.getContext("2d");
+      this.canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+      this.canvasCtx.fillStyle = waveBgColor;
+      this.canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+      this.canvasCtx.lineWidth = 2;
+      this.canvasCtx.strokeStyle = waveColor;
+      this.canvasCtx.beginPath();
+    },
     async deleteRecord() {
       if (this.recorder) {
         await this.recorder.destroy();
@@ -178,58 +215,57 @@ export default {
       }
     },
     drawRecord() {
-      const parentElement = this.$refs.canvasParent;
       const oCanvas = this.$refs.audioCanvas;
-      oCanvas.width = parentElement.clientWidth;
-      oCanvas.height = parentElement.clientHeight;
-      const ctx = oCanvas.getContext('2d');
-      // 获取音频数据
+      this.configCanvas();
       let dataArray = this.recorder.getRecordAnalyseData();
       let bufferLength = dataArray.length;
       const sliceWidth = oCanvas.width * 1.0 / bufferLength;
       let x = 0;
       // 用requestAnimationFrame稳定60fps绘制
       this.drawRecordId = requestAnimationFrame(this.drawRecord);
 
-      // 填充背景色
-      ctx.fillStyle = this.waveBgColor;
-      ctx.fillRect(0, 0, oCanvas.width, oCanvas.height);
-
-      // 设定波形绘制颜色
-      ctx.lineWidth = 2;
-      ctx.strokeStyle = this.waveColor;
-
-      ctx.beginPath();
       for (var i = 0; i < bufferLength; i++) {
         var v = dataArray[i] / 128.0;
         var y = v * oCanvas.height / 2;
 
         if (i === 0) {
           // 第一个点
-          ctx.moveTo(x, y);
+          this.canvasCtx.moveTo(x, y);
         } else {
           // 剩余的点
-          ctx.lineTo(x, y);
+          this.canvasCtx.lineTo(x, y);
         }
         // 依次平移，绘制所有点
         x += sliceWidth;
       }
 
-      ctx.lineTo(oCanvas.width, oCanvas.height / 2);
-      ctx.stroke();
+      this.canvasCtx.lineTo(oCanvas.width, oCanvas.height / 2);
+      this.canvasCtx.stroke();
     }
   },
 }
 </script>
 
 <style module>
-.recordRoot {
+.rootRecord {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.canvasParent {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
+}
 
+.customToolbar {
+  min-width: 100%;
 }
+
 </style>