audio

pages-activity/detail.vue

@@ -32,17 +32,25 @@
         <view class="audio-wrap" v-if="info.activityState === 3">
             <view
                 class="audio-item"
-                v-for="item in audioList"
+                v-for="(item,index) in audioList"
                 :key="item.voiceUrl"
             >
                 <image 
                   class="icon" 
-                  :src="activeAudioUrl==item.voiceUrl?'./static/audio-doing.png':'./static/audio-play.png'" 
+                  :src="(activeAudioUrl==item.voiceUrl&&item.playStatus)?'./static/audio-doing.png':'./static/audio-play.png'" 
                   model="aspectFill" 
                   @click="handlePlayAudio(item)">
                 </image>
                 <view class="name">{{ item.voiceName }}</view>
-                <view class="time">{{ item.voicePlaySeconds|formarVoiceTime }}</view>
+                <view class="time">{{item.currentPlayTime|formarVoiceTime}} / {{ item.voicePlaySeconds|formarVoiceTime }}</view>
+                <slider 
+                    class="audio-slider" 
+                    activeColor="#e3b377"
+                    :max="item.voicePlaySeconds" 
+                    :value="item.currentPlayTime" 
+                    @change="handleAudioSliderChange($event,item)"
+                    block-size="16"
+                />
             </view>
         </view>
 
@@ -132,7 +140,7 @@ export default {
       formarVoiceTime(e){
         let minus=parseInt(e/60)
         let sec=e%60
-        return `${minus}分${sec}秒`
+        return `${minus}:${sec>9?sec:'0'+sec}`
       }
     },
     data() {
@@ -238,11 +246,70 @@ export default {
         // 获取活动音频
         async getAudios() {
             const res = await apiActivityAudios({ activity_id: Number(this.id) });
-            if (res.code === 200) {
-                this.audioList = res.data;
+            if (res.code === 200&&res.data) {
+                this.audioList = res.data.map(item=>{
+                    return {...item,currentPlayTime:0,playStatus:false}
+                });
             }
         },
 
+        //音频进度条拖动
+        handleAudioSliderChange(e,item){
+            const value=e.detail.value
+            item.currentPlayTime=value
+
+            // 如果当前activeAudioUrl 不等于拖动的这个音频
+            if(item.voiceUrl!=this.activeAudioUrl){
+                if(this.activeAudioUrl){
+                    // 先暂停
+                    this.globalBgMusic.pause()
+                }
+                this.handlePlayAudio(item)
+            }else{
+                this.globalBgMusic.seek(value)
+            }
+        },
+
+        // 播放音频
+        handlePlayAudio(e){
+            if(this.activeAudioUrl==e.voiceUrl&&e.playStatus){
+                this.globalBgMusic.pause()
+            }else{
+                this.globalBgMusic.title=e.voiceName
+                this.globalBgMusic.src=e.voiceUrl
+
+                console.log(e.currentPlayTime);
+                // setTimeout(()=>{
+                    this.globalBgMusic.startTime=e.currentPlayTime
+                    this.globalBgMusic.seek(e.currentPlayTime)
+                    
+                // },10)
+                
+            }
+
+            this.globalBgMusic.onCanplay(()=>{
+                this.globalBgMusic.play()
+            })
+          
+            this.globalBgMusic.onPlay(res=>{
+                this.activeAudioUrl=e.voiceUrl
+                e.playStatus=true
+            })
+            this.globalBgMusic.onPause(()=>{
+                e.playStatus=false
+            })
+            this.globalBgMusic.onStop(()=>{
+                e.playStatus=false
+            })
+            this.globalBgMusic.onEnded(()=>{
+                e.playStatus=false
+                e.currentPlayTime=0
+            })
+            this.globalBgMusic.onTimeUpdate(()=>{
+                e.currentPlayTime=parseInt(this.globalBgMusic.currentTime)
+            })
+        },
+
         // 点击信息项
         handleClickInfoItem(e) {
             if (e.type === "tel" && e.text) {
@@ -252,30 +319,6 @@ export default {
             }
         },
 
-        // 播放音频
-        handlePlayAudio(e){
-          if(e.voiceUrl==this.activeAudioUrl){
-            this.globalBgMusic.pause()
-          }else{
-            this.globalBgMusic.title=e.voiceName
-            this.globalBgMusic.src=e.voiceUrl
-            this.globalBgMusic.play()
-          }
-          
-          this.globalBgMusic.onPlay(res=>{
-            this.activeAudioUrl=e.voiceUrl
-          })
-          this.globalBgMusic.onPause(e=>{
-            this.activeAudioUrl=''
-          })
-          this.globalBgMusic.onStop(e=>{
-            this.activeAudioUrl=''
-          })
-          this.globalBgMusic.onEnded(e=>{
-            this.activeAudioUrl=''
-          })
-        },
-
         // 跳转webview 打开报告
         handleOpenReport() {
             uni.navigateTo({
@@ -512,13 +555,12 @@ export default {
 .audio-wrap {
     padding: 0 94rpx 0 34rpx;
     .audio-item {
-        padding: 36rpx 0;
-        border-bottom: 1px solid #E8DED2;
+        padding-top: 36rpx;
+        // border-bottom: 1px solid #E8DED2;
         position: relative;
         .icon {
             position: absolute;
-            top: 50%;
-            transform: translateY(-50%);
+            top: 50rpx;
             right: 0;
             width: 48rpx;
             height: 48rpx;
@@ -529,6 +571,9 @@ export default {
         .time {
             font-size: $global-font-size-mini;
         }
+        .audio-slider{
+            margin: 20rpx 0;
+        }
     }
 }