语音播报列表音频播放修改

src/store/index.js

@@ -31,6 +31,7 @@ export default createStore({
       index:0,//当前播放第几个
       activityId:0,//活动的id
       reportId:0,//报告的id
+      voiceId:0,//语音播报列表id
       paused:true,//当前音频播放状态
       show:false,//是否显示音频弹窗
     },
@@ -69,6 +70,7 @@ export default createStore({
       state.audioData.list=e.list
       state.audioData.activityId=e.activityId||0
       state.audioData.reportId=e.reportId||0
+      state.audioData.voiceId=e.voiceId||0
       state.audioData.show=true
       state.audioData.INS.play()
     },
@@ -93,6 +95,7 @@ export default createStore({
           state.audioData.index=0
           state.audioData.activityId=0
           state.audioData.reportId=0
+          state.audioData.voiceId=0
           state.audioData.INS=null
           state.audioData.show=false
           state.audioData.paused=false
@@ -107,6 +110,7 @@ export default createStore({
       state.audioData.index=0
       state.audioData.activityId=0
       state.audioData.reportId=0
+      state.audioData.voiceId=0
       state.audioData.INS=null
       state.audioData.show=false
       state.audioData.paused=false

src/views/voice/List.vue

@@ -8,9 +8,11 @@ import { ElMessage, ElMessageBox } from 'element-plus'
 import { useElementSize } from '@vueuse/core'
 import moment from 'moment'
 import { useRoute, useRouter } from 'vue-router'
+import { useStore } from 'vuex'
 
 const router=useRouter()
 const route=useRoute()
+const store=useStore()
 
 //监听列表页面版心宽度
 const listPageEl=ref('')
@@ -204,48 +206,39 @@ const handleDel=async (item)=>{
 }
 
 //播放音频
-const AudioIns=ref(null)
-let audioState=reactive({
-    paused:true,
-    url:'',//临时音频地址
-    duration:'',//时长
-    id:0,
-    curTime:''
-})
 const handlePlay=(item)=>{
-    if(!audioState.url||audioState.id!=item.BroadcastId){
-        audioState.url=item.VoiceUrl
-        audioState.duration=item.VoicePlaySeconds
-        audioState.curTime=item.VoicePlaySeconds
-        audioState.id=item.BroadcastId
-        setTimeout(() => {
-            AudioIns.value.play()
-        }, 100);
-        handleVoiceRecord(item)
+    if(store.state.audioData.voiceId==item.BroadcastId){
+        if(store.state.audioData.paused){
+            store.state.audioData.INS.play()
+        }else{
+            store.state.audioData.INS.pause()
+        }
         return
     }
-    if(audioState.paused){
-        AudioIns.value.play()
-    }else{
-        AudioIns.value.pause()
-    }
-}
-const audioTimeupdate=(e)=>{// 音频播放时间更新
-    audioState.curTime=parseInt(audioState.duration)-parseInt(e.target.currentTime)  
-}
-const audioOnError=(e)=>{
-    console.log('音频播放错误');
-}
-const audioOnEnd=()=>{// 音频播放结束事件
-    audioState.paused=true
-    audioState.url=''
-    audioState.id=0
-}
-const audioOnPause=()=>{// 音频播放暂停事件
-    audioState.paused=true
-}
-const audioOnPlay=()=>{// 音频开始播放事件
-    audioState.paused=false
+    store.commit('addAudio',{
+        list:[{name:item.BroadcastName,url:item.VoiceUrl,time:item.VoicePlaySeconds}],
+        voiceId:item.BroadcastId,
+        index:0
+    })
+    handleVoiceRecord(item)
+
+
+    // if(!audioState.url||audioState.id!=item.BroadcastId){
+    //     audioState.url=item.VoiceUrl
+    //     audioState.duration=item.VoicePlaySeconds
+    //     audioState.curTime=item.VoicePlaySeconds
+    //     audioState.id=item.BroadcastId
+    //     setTimeout(() => {
+    //         AudioIns.value.play()
+    //     }, 100);
+    //     handleVoiceRecord(item)
+    //     return
+    // }
+    // if(audioState.paused){
+    //     AudioIns.value.play()
+    // }else{
+    //     AudioIns.value.pause()
+    // }
 }
 
 //上报音频播放记录
@@ -318,9 +311,8 @@ onActivated(()=>{
                     <h2 class="title">{{item.BroadcastName}}</h2>
                     <div class="time">发布时间：{{moment(item.CreateTime).format('YYYY-MM-DD HH:mm:ss')}}</div>
                     <div class="flex audio-box" @click="handlePlay(item)">
-                        <div :class="['icon',item.BroadcastId==audioState.id&&!audioState.paused?'active':'']"></div>
-                        <div v-if="item.BroadcastId==audioState.id">{{formarVoiceTime(audioState.curTime)}}</div>
-                        <div v-else>{{formarVoiceTime(item.VoicePlaySeconds)}}</div>
+                        <div :class="['icon',($store.state.audioData.voiceId==item.BroadcastId)&&!$store.state.audioData.paused?'active':'']"></div>
+                        <div>{{formarVoiceTime(item.VoicePlaySeconds)}}</div>
                     </div>
                     <img 
                         class="del-btn" 
@@ -344,17 +336,6 @@ onActivated(()=>{
                 </div>
             </div>
         </SelfList>
-        <audio 
-            @ended="audioOnEnd" 
-            @pause="audioOnPause"
-            @play="audioOnPlay"
-            @timeupdate="audioTimeupdate"
-            @error="audioOnError"
-            :src="audioState.url"
-            ref="AudioIns"
-            style="display: none;"
-            autoplay
-        ></audio>
     </div>
 </template>