实时喊话

src/project/beta/AppBroadcast1/LiveBroadcast.vue

@@ -54,13 +54,16 @@
         <span class="line19 animation"></span>
         <span class="line20 animation"></span>
       </div>
-      <h2>00:00:13</h2>
+      <h2>{{ time }}</h2>
     </div>
   </div>
 </template>
 
 <script>
   import { mapState } from 'vuex'
+  import Recorder from 'recorder-core'
+  import 'recorder-core/src/engine/mp3'
+  import 'recorder-core/src/engine/mp3-engine'
   export default {
     name: 'LiveBroadcast',
 
@@ -77,7 +80,13 @@
         closeW: require('./img/close-w.png'),
         isShow: false,
         isImpact: false,
-        startTime: 0
+        startTime: 0,
+        isRecording: false,
+        recorder: null,
+        blobFile: null,
+        counterDownTime: 0,
+        time: '00:00:00',
+        timingTimeout: null
       }
     },
 
@@ -99,24 +108,76 @@
         this.isImpact = false
         this.startTime = new Date().getTime()
         this.isShow = true
+        this.record()
+      },
+
+      record () {
+        this.duration = 0
+        this.recorder = Recorder({
+          type: 'mp3',
+          sampleRate: 16000,
+          bitRate: 16,
+          onProcess(buffers, powerLevel, bufferDuration, bufferSampleRate, newBufferIdx, asyncEnd) {
+            //可利用extensions/waveview.js扩展实时绘制波形
+          }
+        })
+
+        this.recorder.open(() => {
+          this.recorder.start()
+          this.timing()
+        })
+      },
+
+      timing () {
+        var durationObj = this.$dayjs.duration(this.counterDownTime * 1000)
+        var hours = durationObj.hours() > 9 ? durationObj.hours() : '0' + durationObj.hours()
+        var min = durationObj.minutes() > 9 ? durationObj.minutes() : '0' + durationObj.minutes()
+        var seconds = durationObj.seconds() > 9 ? durationObj.seconds() : '0' + durationObj.seconds()
+
+        this.time = hours + ':' + min + ':' + seconds
+        this.counterDownTime++
+        this.timingTimeout = setTimeout(() => {
+          this.timing()
+        }, 1000)
+      },
+
+      stop (isCancel) {
+        this.counterDownTime = 0
+        clearTimeout(this.timingTimeout)
+        this.recorder.stop((blob, duration) => {
+          this.recorder.close()
+          this.recorder = null
+
+          if (!isCancel) {
+            this.blobFile = blob
+          }
+
+          this.time = '00:00:00'
+          console.log(blob, (window.URL || webkitURL).createObjectURL(blob), '时长:' + duration + 'ms')
+        }, msg => {
+          console.log('录音失败:' + msg)
+          this.recorder.close()
+          this.recorder = null
+        })
       },
 
       onTouchend () {
         if (this.isShow && new Date().getTime() - this.startTime < 1500) {
           this.isImpact = false
           this.isShow = false
+          this.stop(true)
           return this.$u.toast('说话时间太短')
         }
 
         if (this.isImpact) {
           this.isShow = false
           this.isImpact = false
-
+          this.stop(true)
           return false
         }
 
         this.isImpact = false
-        this.submit()
+        this.stop()
       },
 
       onTouchmove (e) {