Initial Commit

components/voice-message/voice-message.js

@@ -0,0 +1,321 @@
+// 🎤 语音消息组件逻辑
+const voiceMessageManager = require('../../utils/voice-message-manager.js');
+
+Component({
+  properties: {
+    // 语音消息数据
+    voiceData: {
+      type: Object,
+      value: {},
+      observer: 'onVoiceDataChange'
+    },
+    
+    // 是否为自己发送的消息
+    isSelf: {
+      type: Boolean,
+      value: false
+    },
+    
+    // 消息ID
+    messageId: {
+      type: String,
+      value: ''
+    }
+  },
+
+  data: {
+    // 播放状态
+    isPlaying: false,
+    isLoading: false,
+    hasError: false,
+    
+    // 播放进度
+    currentTime: 0,
+    duration: 0,
+    playProgress: 0,
+    
+    // 波形数据
+    waveformData: [],
+    currentWaveIndex: 0,
+    
+    // 语音信息
+    voiceUrl: '',
+    voiceDuration: 0
+  },
+
+  lifetimes: {
+    attached() {
+      console.log('🎤 语音消息组件加载');
+      this.initComponent();
+    },
+    
+    detached() {
+      console.log('🎤 语音消息组件卸载');
+      this.cleanup();
+    }
+  },
+
+  methods: {
+    // 初始化组件
+    initComponent() {
+      // 注册语音管理器事件
+      this.registerVoiceEvents();
+      
+      // 生成波形数据
+      this.generateWaveform();
+      
+      // 检查当前播放状态
+      this.checkPlayingState();
+    },
+
+    // 语音数据变化处理
+    onVoiceDataChange(newData, oldData) {
+      if (!newData || JSON.stringify(newData) === JSON.stringify(oldData)) {
+        return;
+      }
+      
+      console.log('🎤 语音数据更新:', newData);
+      
+      this.setData({
+        voiceUrl: newData.url || '',
+        voiceDuration: newData.duration || 0,
+        duration: newData.duration || 0
+      });
+      
+      // 重新生成波形
+      this.generateWaveform();
+      
+      // 检查播放状态
+      this.checkPlayingState();
+    },
+
+    // 注册语音管理器事件
+    registerVoiceEvents() {
+      // 播放开始事件
+      voiceMessageManager.on('playStart', () => {
+        this.checkPlayingState();
+      });
+      
+      // 播放结束事件
+      voiceMessageManager.on('playEnd', () => {
+        this.setData({
+          isPlaying: false,
+          currentTime: 0,
+          playProgress: 0,
+          currentWaveIndex: 0
+        });
+      });
+      
+      // 播放进度更新事件
+      voiceMessageManager.on('playTimeUpdate', (data) => {
+        if (this.isCurrentMessage()) {
+          this.updatePlayProgress(data.currentTime, data.duration);
+        }
+      });
+      
+      // 播放错误事件
+      voiceMessageManager.on('playError', (error) => {
+        if (this.isCurrentMessage()) {
+          console.error('🎤 语音播放错误:', error);
+          this.setData({
+            isPlaying: false,
+            isLoading: false,
+            hasError: true
+          });
+        }
+      });
+      
+      // 播放可以开始事件
+      voiceMessageManager.on('playCanplay', () => {
+        if (this.isCurrentMessage()) {
+          this.setData({
+            isLoading: false,
+            hasError: false
+          });
+        }
+      });
+    },
+
+    // 检查是否为当前播放的消息
+    isCurrentMessage() {
+      const currentMessageId = voiceMessageManager.getCurrentPlayingMessageId();
+      return currentMessageId === this.properties.messageId;
+    },
+
+    // 检查播放状态
+    checkPlayingState() {
+      const isCurrentlyPlaying = this.isCurrentMessage() && voiceMessageManager.isPlaying();
+      
+      this.setData({
+        isPlaying: isCurrentlyPlaying
+      });
+    },
+
+    // 切换播放状态
+    async togglePlay() {
+      if (this.data.hasError) {
+        return this.retryPlay();
+      }
+      
+      if (this.data.isLoading) {
+        return;
+      }
+      
+      try {
+        if (this.data.isPlaying) {
+          // 暂停播放
+          voiceMessageManager.pausePlaying();
+          this.setData({ isPlaying: false });
+        } else {
+          // 开始播放
+          await this.startPlay();
+        }
+      } catch (error) {
+        console.error('🎤 切换播放状态失败:', error);
+        this.setData({
+          hasError: true,
+          isLoading: false,
+          isPlaying: false
+        });
+      }
+    },
+
+    // 开始播放
+    async startPlay() {
+      if (!this.data.voiceUrl) {
+        console.error('🎤 语音URL为空');
+        return;
+      }
+      
+      try {
+        this.setData({
+          isLoading: true,
+          hasError: false
+        });
+        
+        // 播放语音消息
+        await voiceMessageManager.playVoiceMessage(
+          this.data.voiceUrl,
+          this.properties.messageId
+        );
+        
+        this.setData({
+          isPlaying: true,
+          isLoading: false
+        });
+        
+        console.log('🎤 开始播放语音消息');
+        
+      } catch (error) {
+        console.error('🎤 播放语音消息失败:', error);
+        this.setData({
+          hasError: true,
+          isLoading: false,
+          isPlaying: false
+        });
+      }
+    },
+
+    // 重试播放
+    async retryPlay() {
+      console.log('🎤 重试播放语音消息');
+      
+      this.setData({
+        hasError: false,
+        isLoading: false,
+        isPlaying: false
+      });
+      
+      await this.startPlay();
+    },
+
+    // 更新播放进度
+    updatePlayProgress(currentTime, duration) {
+      if (!duration || duration <= 0) return;
+      
+      const progress = (currentTime / duration) * 100;
+      const waveIndex = Math.floor((currentTime / duration) * this.data.waveformData.length);
+      
+      this.setData({
+        currentTime: currentTime,
+        duration: duration,
+        playProgress: progress,
+        currentWaveIndex: Math.max(0, waveIndex)
+      });
+    },
+
+    // 生成波形数据
+    generateWaveform() {
+      const duration = this.data.voiceDuration || this.data.duration || 1000;
+      const barCount = Math.min(Math.max(Math.floor(duration / 200), 8), 30); // 8-30个波形条
+      
+      const waveformData = [];
+      for (let i = 0; i < barCount; i++) {
+        // 生成随机高度，模拟真实波形
+        const height = Math.random() * 60 + 20; // 20-80%的高度
+        waveformData.push(height);
+      }
+      
+      this.setData({
+        waveformData: waveformData,
+        currentWaveIndex: 0
+      });
+      
+      console.log('🌊 生成波形数据:', waveformData.length, '个波形条');
+    },
+
+    // 格式化时长显示
+    formatDuration(duration) {
+      if (!duration || duration <= 0) return '0"';
+      
+      const seconds = Math.floor(duration / 1000);
+      const minutes = Math.floor(seconds / 60);
+      const remainingSeconds = seconds % 60;
+      
+      if (minutes > 0) {
+        return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+      } else {
+        return `${remainingSeconds}"`;
+      }
+    },
+
+    // 格式化时间显示
+    formatTime(time) {
+      if (!time || time <= 0) return '0:00';
+      
+      const totalSeconds = Math.floor(time);
+      const minutes = Math.floor(totalSeconds / 60);
+      const seconds = totalSeconds % 60;
+      
+      return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+    },
+
+    // 获取语音文件大小描述
+    getFileSizeDescription(fileSize) {
+      if (!fileSize || fileSize <= 0) return '';
+      
+      if (fileSize < 1024) {
+        return `${fileSize}B`;
+      } else if (fileSize < 1024 * 1024) {
+        return `${(fileSize / 1024).toFixed(1)}KB`;
+      } else {
+        return `${(fileSize / (1024 * 1024)).toFixed(1)}MB`;
+      }
+    },
+
+    // 清理资源
+    cleanup() {
+      // 如果当前正在播放这个消息，停止播放
+      if (this.isCurrentMessage() && voiceMessageManager.isPlaying()) {
+        voiceMessageManager.stopPlaying();
+      }
+      
+      // 移除事件监听器
+      voiceMessageManager.off('playStart');
+      voiceMessageManager.off('playEnd');
+      voiceMessageManager.off('playTimeUpdate');
+      voiceMessageManager.off('playError');
+      voiceMessageManager.off('playCanplay');
+    }
+  }
+});