2

src/apps/AppBroadcast1/LiveBroadcast.vue

@@ -14,12 +14,12 @@
       <div class="record" v-if="isShowRecord">
         <h2>喊话记录</h2>
         <scroll-view scroll-y class="record-wrapper">
-          <div class="record-item" v-for="(item, index) in 100" :key="index">
+          <div class="record-item" v-for="(item, index) in recordList" :key="index">
             <image :src="user.avatar" />
             <div class="right">
-              <!-- <image mode="aspectFit" src="./img/voice-icon.png" /> -->
-              <image src="./img/voice.gif" />
-              <span>23"</span>
+              <image mode="aspectFit" @click="play(item.src, index)" v-if="!item.isPlay" src="./img/voice-icon.png" />
+              <image v-else src="./img/voice.gif" />
+              <span>{{ item.duration }}"</span>
             </div>
           </div>
         </scroll-view>
@@ -94,7 +94,10 @@
         counterDownTime: 0,
         time: '00:00:00',
         timingTimeout: null,
-        equipmentList: []
+        equipmentList: [],
+        recordList: [],
+        innerAudioContext: null,
+        currIndex: -1
       }
     },
 
@@ -111,16 +114,30 @@
     },
 
     mounted () {
-      const close = document.querySelector('.close')
-      this.x = close.offsetLeft
-      this.y = close.offsetTop
-      this.w = close.clientWidth
-      this.h = close.clientHeight
+      this.$nextTick(() => {
+        const close = document.querySelector('.close')
+        this.x = close.offsetLeft
+        this.y = close.offsetTop
+        this.w = close.clientWidth
+        this.h = close.clientHeight
+      })
     },
 
     onLoad () {
+      this.innerAudioContext = uni.createInnerAudioContext()
+      this.innerAudioContext.autoplay = true
+      this.innerAudioContext.onEnded(() => {
+        if (this.currIndex > -1) {
+          this.$set(this.recordList[this.currIndex], 'isPlay', false)
+          // this.innerAudioContext.destroy()
+          this.currIndex = -1
+        }
+      })
+      this.innerAudioContext.onPlay(() => {
+        this.$set(this.recordList[this.currIndex], 'isPlay', true)
+      })
+
       uni.$on('chooseEquipment', e => {
-        console.log(e)
         this.equipmentList = e.equipmentList
       })
     },
@@ -173,6 +190,24 @@
         }, 1000)
       },
 
+      blobToDataURI(blob) {
+        return new Promise((resolve) => {
+          var reader = new FileReader()
+          reader.readAsDataURL(blob)
+          reader.onload = function (e) {
+            resolve(e.target.result)
+          }
+        })
+      },
+
+      play (url, index) {
+        this.currIndex = index
+
+        this.$nextTick(() => {
+          this.innerAudioContext.src = url
+        })
+      },
+
       stop (isCancel) {
         this.counterDownTime = 0
         clearTimeout(this.timingTimeout)
@@ -180,11 +215,32 @@
           this.recorder.close()
           this.recorder = null
 
-          if (!isCancel) {
-            this.blobFile = blob
+          if (isCancel) {
+            return false
           }
 
           this.time = '00:00:00'
+          // this.blobToDataURI(blob).then(res => {
+          //   console.log(res, (window.URL || webkitURL).createObjectURL(blob), '时长:' + duration + 'ms')
+          // })
+          this.recordList.push({
+            src: (window.URL || webkitURL).createObjectURL(blob),
+            isPlay: false,
+            duration: (duration / 1000).toFixed(0)
+          })
+
+
+          let formData = {}
+          formData = new FormData()
+          formData.append('file', blob)
+
+          this.$http.post(`/app/appdlbresource/uploadDlbFile`, formData).then(res => {
+            if (res.code === 0) {
+
+            }
+          })
+          this.isShowRecord = true
+          this.isShow = false
           console.log(blob, (window.URL || webkitURL).createObjectURL(blob), '时长:' + duration + 'ms')
         }, msg => {
           console.log('录音失败:' + msg)