<!-- 🎤 语音消息组件 -->
<view class="voice-message-container {{isSelf ? 'self' : 'other'}} {{isPlaying ? 'playing' : ''}}">
  <!-- 语音消息气泡 -->
  <view class="voice-bubble" bindtap="togglePlay">
    <!-- 播放按钮 -->
    <view class="play-button">
      <view class="play-icon {{isPlaying ? 'pause' : 'play'}}">
        <text wx:if="{{!isPlaying}}" class="icon">▶</text>
        <text wx:else class="icon">⏸</text>
      </view>
    </view>
    
    <!-- 语音波形 -->
    <view class="voice-waveform">
      <view class="waveform-container">
        <view wx:for="{{waveformData}}" 
              wx:key="index" 
              class="wave-bar {{index <= currentWaveIndex ? 'active' : ''}}"
              style="height: {{item}}%;">
        </view>
      </view>
    </view>
    
    <!-- 语音时长 -->
    <view class="voice-duration">
      <text class="duration-text">{{formatDuration(duration)}}</text>
    </view>
  </view>
  
  <!-- 播放进度条 -->
  <view wx:if="{{isPlaying}}" class="progress-container">
    <view class="progress-bar">
      <view class="progress-fill" style="width: {{playProgress}}%;"></view>
    </view>
    <view class="progress-time">
      <text class="current-time">{{formatTime(currentTime)}}</text>
      <text class="total-time">{{formatTime(duration)}}</text>
    </view>
  </view>
  
  <!-- 加载状态 -->
  <view wx:if="{{isLoading}}" class="loading-container">
    <view class="loading-spinner"></view>
    <text class="loading-text">加载中...</text>
  </view>
  
  <!-- 错误状态 -->
  <view wx:if="{{hasError}}" class="error-container">
    <text class="error-icon">⚠️</text>
    <text class="error-text">播放失败</text>
    <text class="retry-button" bindtap="retryPlay">重试</text>
  </view>
</view>
