heshanApp/pages_im/pages/conversation/chating/components/MessageItem/AudioMessageRender.vue

<template>
  <view
    @click="playAudio"
    class="audio_message_container bg_container"
    :class="[isSender ? 'audio_message_container_self' : '']">
    <view class="cricleplay" :class="[isSender ? 'cricleplay_self' : '']">
      <view class="play-icon-small" :class="[isSender ? 'play-icon-small-self' : '']"></view>
      <view class="play-icon-middle" :class="[isSender ? 'play-icon-middle-self' : '']" :style="{ opacity: (playing && animateStep < 2) ? 0 : 1 }"></view>
      <view class="play-icon-large" :class="[isSender ? 'play-icon-large-self' : '']" :style="{ opacity: (playing && animateStep < 3) ? 0 : 1 }"></view>
    </view>
    <text class="audio_duration">{{ message.soundElem.duration }}''</text>
    <view v-if="showUnreadIndicator" class="audio_unread_dot"></view>
  </view>
</template>

<script>
// 音频播放单例管理
let _audioContext = null;
let _currentVM = null;

function getAudioContext() {
  if (!_audioContext) {
    _audioContext = uni.createInnerAudioContext();
    // #ifdef APP-PLUS
    // if (uni.getSystemInfoSync().platform === 'ios') {
    //   uni.setInnerAudioOption({
    //     obeyMuteSwitch: false
    //   });
    // }
    // #endif

    _audioContext.onPlay(() => {
      if (_currentVM) {
        _currentVM.playing = true;
        _currentVM.paused = false;
        // Animation is started immediately on click to reduce perceived latency
        if (_currentVM.animateStep === 3) { // Only start if not already running
             _currentVM.startAnimate();
        }
        _currentVM.startSafetyTimer();
      }
    });
    
    _audioContext.onPause(() => {
      if (_currentVM) {
        _currentVM.playing = false;
        _currentVM.paused = true;
        _currentVM.stopAnimate();
        _currentVM.stopSafetyTimer();
      }
    });
    
    _audioContext.onStop(() => {
      if (_currentVM) {
        _currentVM.playing = false;
        _currentVM.paused = false;
        _currentVM.stopAnimate();
        _currentVM.stopSafetyTimer();
      }
    });
    
    _audioContext.onEnded(() => {
      if (_currentVM) {
        _currentVM.playing = false;
        _currentVM.paused = false;
        _currentVM.stopAnimate();
        _currentVM.stopSafetyTimer();
      }
    });

    _audioContext.onTimeUpdate(() => {
      if (_currentVM && _currentVM.playing) {
        _currentVM.handleTimeUpdate();
      }
    });
    
    _audioContext.onError((err) => {
      console.error('Audio play error:', err);
      if (_currentVM) {
        _currentVM.playing = false;
        _currentVM.paused = false;
        _currentVM.stopAnimate();
        _currentVM.stopSafetyTimer();
      }
    });
  }
  return _audioContext;
}

export default {
  name: "AudioMessageRender",
  props: {
    isSender: Boolean,
    message: Object,
  },
  data() {
    return {
      playing: false,
      paused: false,
      hasRead: false,
      animateStep: 3,
      animateTimer: null,
      safetyTimer: null,
    };
  },
  mounted() {
    this.checkReadState();
  },
  watch: {
    message: {
      handler() {
        this.checkReadState();
      },
    },
    playing(val) {
      if (val) {
        this.startAnimate();
        this.startSafetyTimer();
      } else {
        this.stopAnimate();
        this.stopSafetyTimer();
      }
    },
  },
  beforeDestroy() {
    this.stopAnimate();
    this.stopSafetyTimer();
    // 如果当前组件正在播放，销毁前停止播放
    if (_currentVM === this) {
      const ctx = getAudioContext();
      if (ctx) {
        ctx.stop();
      }
      _currentVM = null;
    }
  },
  computed: {
    showUnreadIndicator() {
      return !this.isSender && !this.hasRead && Boolean(this.message?.clientMsgID);
    },
  },
  methods: {
    getStorageKey() {
      const userID = this.$store?.getters?.storeCurrentUserID || "";
      return `${userID || "GLOBAL"}_AudioMessageReadIds`;
    },
    loadReadIds() {
      const key = this.getStorageKey();
      const stored = uni.getStorageSync(key);
      const readIds = Array.isArray(stored) ? stored : [];
      return { key, readIds };
    },
    checkReadState() {
      const clientMsgID = this.message?.clientMsgID;
      if (!clientMsgID) {
        this.hasRead = true;
        return;
      }
      const { readIds } = this.loadReadIds();
      this.hasRead = readIds.includes(clientMsgID);
    },
    markAsRead() {
      const clientMsgID = this.message?.clientMsgID;
      if (this.hasRead || !clientMsgID) {
        return;
      }
      const { key, readIds } = this.loadReadIds();
      if (readIds.includes(clientMsgID)) {
        this.hasRead = true;
        return;
      }
      uni.setStorageSync(key, [...readIds, clientMsgID]);
      this.hasRead = true;
    },
    playAudio() {
      const ctx = getAudioContext();
      
      // 如果点击的是当前正在播放/暂停的音频
      if (_currentVM === this) {
        if (this.playing) {
          ctx.pause();
          this.playing = false;
          this.paused = true;
        } else {
          ctx.play();
          this.playing = true;
          this.paused = false;
          this.markAsRead();
        }
        return;
      }

      // 如果有其他音频正在播放，先停止它
      if (_currentVM) {
        _currentVM.playing = false;
        _currentVM.paused = false;
        _currentVM.stopAnimate();
      }
      
      // 切换到当前音频
      _currentVM = this;
      
      // 注意：不要调用 ctx.stop()，因为在 iOS 或某些 Android 设备上，stop() 会触发 onStop 事件
      // 如果 onStop 是异步执行的，可能会错误地将 _currentVM.playing 设置为 false
      // 直接设置 src 并 play 会自动停止上一个音频
      
      const sourceUrl = this.message.soundElem.sourceUrl;
      const soundPath = this.message.soundElem.soundPath;

      // 1. 尝试播放本地文件 (通常是自己发送的消息)
      if (soundPath && this.isFileExist(soundPath)) {
        this.playLocalFile(ctx, soundPath);
        return;
      }

      // 2. 尝试播放缓存文件
      const cachedKey = 'AUDIO_CACHE_' + sourceUrl;
      const cachedPath = uni.getStorageSync(cachedKey);
      if (cachedPath) {
        if (this.isFileExist(cachedPath)) {
          this.playLocalFile(ctx, cachedPath);
          return;
        } else {
          // 缓存文件不存在（可能被系统清理），清除缓存记录
          uni.removeStorageSync(cachedKey);
        }
      }

      // 3. 优先尝试流式播放（减少等待时间），同时后台下载缓存
      if (sourceUrl) {
        // 立即播放远程地址
        ctx.src = sourceUrl;
        ctx.play();
        this.playing = true;
        this.paused = false;
        this.startAnimate(); // 立即开始动画，减少用户感知的延迟
        this.markAsRead();
        
        // 后台静默下载缓存
        this.downloadFileSilently(sourceUrl);
      } else {
        uni.showToast({ title: '无效的音频地址', icon: 'none' });
        this.playing = false;
        _currentVM = null;
      }
    },
    
    isFileExist(path) {
      try {
        uni.getFileSystemManager().accessSync(path);
        return true;
      } catch (e) {
        return false;
      }
    },
    
    playLocalFile(ctx, path) {
        ctx.src = path;
        ctx.play();
        // 立即更新状态，确保UI响应
        this.playing = true;
        this.paused = false;
        this.startAnimate(); // 立即开始动画
        this.markAsRead();
    },

    downloadFileSilently(url) {
        // 检查是否已有缓存或正在下载
        if (uni.getStorageSync('AUDIO_CACHE_' + url)) return;
        
        uni.downloadFile({
            url: url,
            success: (res) => {
                if (res.statusCode === 200) {
                    uni.setStorageSync('AUDIO_CACHE_' + url, res.tempFilePath);
                }
            },
            fail: (err) => {
                console.error('Silent audio download failed:', err);
            }
        });
    },

    // 保留旧方法作为备用（如果需要）
    downloadAndPlay(ctx, url) {
        uni.downloadFile({
            url: url,
            success: (res) => {
                // 如果用户已经切换到其他音频，丢弃本次下载结果
                if (_currentVM !== this) return;

                if (res.statusCode === 200) {
                    const tempFilePath = res.tempFilePath;
                    // 缓存路径
                    uni.setStorageSync('AUDIO_CACHE_' + url, tempFilePath);
                    // 播放
                    ctx.src = tempFilePath;
                    ctx.play();
                    
                    // 立即更新状态
                    this.playing = true;
                    this.paused = false;
                    this.markAsRead();
                } else {
                    console.error('Audio download failed:', res);
                    uni.showToast({ title: '音频加载失败', icon: 'none' });
                    this.playing = false;
                    _currentVM = null;
                }
            },
            fail: (err) => {
                // 如果用户已经切换到其他音频，忽略错误
                if (_currentVM !== this) return;

                console.error('Audio download error:', err);
                uni.showToast({ title: '音频下载出错', icon: 'none' });
                this.playing = false;
                _currentVM = null;
            }
        });
    },

    startAnimate() {
      this.stopAnimate();
      this.animateStep = 1;
      this.animateTimer = setInterval(() => {
        this.animateStep++;
        if (this.animateStep > 3) {
          this.animateStep = 1;
        }
      }, 500);
    },

    stopAnimate() {
      if (this.animateTimer) {
        clearInterval(this.animateTimer);
        this.animateTimer = null;
      }
      this.animateStep = 3;
      // Force update by using $nextTick if available or simple assignment
      // In nvue/weex, sometimes direct assignment doesn't trigger UI update if value is same type but not detected change?
      // But here 3 should trigger opacity 1. 
      // Let's verify template logic: :style="{ opacity: animateStep >= 2 ? 1 : 0 }"
      // If animateStep is 3, opacity is 1. 
    },

    handleTimeUpdate() {
      const ctx = getAudioContext();
      if (!ctx) return;
      
      const duration = this.message.soundElem.duration;
      // Check if playback exceeded duration (with small tolerance)
      if (duration && ctx.currentTime >= duration + 0.5) {
        this.forceStop();
        return;
      }
      
      // Reset safety timer based on remaining time + buffer
      this.resetSafetyTimer(duration - ctx.currentTime);
    },
    
    startSafetyTimer() {
      const duration = this.message.soundElem.duration || 60;
      // Initial safe buffer: duration + 5s (to account for buffering)
      this.resetSafetyTimer(duration + 5);
    },
    
    stopSafetyTimer() {
      if (this.safetyTimer) {
        clearTimeout(this.safetyTimer);
        this.safetyTimer = null;
      }
    },
    
    resetSafetyTimer(seconds) {
      this.stopSafetyTimer();
      const ms = Math.max(1000, seconds * 1000 + 1000); // Minimum 1s, Buffer 1s
      this.safetyTimer = setTimeout(() => {
        this.forceStop();
      }, ms);
    },
    
    forceStop() {
      this.playing = false;
      this.paused = false;
      this.stopAnimate();
      this.stopSafetyTimer();
      
      if (_currentVM === this) {
        const ctx = getAudioContext();
        if (ctx) ctx.stop();
        _currentVM = null;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.bg_container {
  padding: 16rpx 24rpx;
  border-radius: 0rpx 12rpx 12rpx 12rpx;
  background-color: #ffffff;
}

.audio_wrapper {
  flex-direction: row;
  align-items: center;
}

.audio_wrapper_self {
  flex-direction: row-reverse;
}

.audio_message_container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 16rpx 24rpx;
  border-radius: 0rpx 12rpx 12rpx 12rpx;
  border-width: 1px;
  border-style: solid;
  border-color: #E8EAEF;
  min-width: 140rpx;
  background-color: #ffffff;
  /* z-index: 1; */
}

.audio_message_container_self {
  flex-direction: row-reverse;
  border-radius: 12rpx 0 12rpx 12rpx;
  background-color: #95EC69 !important;
  border-color: #95EC69;
}

.audio_duration {
  font-size: 18px;
  color: #333333;
}

.cricleplay {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 12rpx;
  flex-shrink: 0;
}

.cricleplay_self {
  margin-right: 0;
  margin-left: 12rpx;
  flex-direction: row-reverse;
}

.play-icon-small {
  width: 7px;
  height: 5px;
  flex-shrink: 0;
  border-style: solid;
  border-width: 1px;
  border-radius: 50%;
  border-color: transparent;
  border-right-color: #3870e4;
}

.play-icon-small-self {
  border-color: transparent;
  border-left-color: #000000;
  border-right-color: transparent;
}

.play-icon-middle {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-style: solid;
  border-width: 1px;
  border-radius: 50%;
  border-color: transparent;
  border-right-color: #3870e4;
  margin-left: -5px;
  opacity: 1;
}

.play-icon-middle-self {
  border-color: transparent;
  border-left-color: #000000;
  border-right-color: transparent;
  margin-left: 0;
  margin-right: -5px;
}

.play-icon-large {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-style: solid;
  border-width: 1px;
  border-radius: 50%;
  border-color: transparent;
  border-right-color: #3870e4;
  margin-left: -15px;
  opacity: 1;
}

.play-icon-large-self {
  border-color: transparent;
  border-left-color: #000000;
  border-right-color: transparent;
  margin-left: 0;
  margin-right: -15px;
}

/* Animations in NVUE are limited, using opacity might work but @keyframes are not fully supported in all nvue modes. 
   Ideally should use bindingx or weex animation module. 
   For now, we remove complex animation or keep it simple. */



.audio_unread_dot {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background-color: #FF4D4F;
  margin-left: 10rpx;
}

</style>