從錄音上傳到前端直連：貓語翻譯器的 WebRTC 實戰、多模態解析與社群病毒式行銷

圖 1.1：WebRTC 前端收音與人貓語氣情緒對應模型

  async function startRealDecode() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        
        let options = { audioBitsPerSecond: 12000 }; 
        if (MediaRecorder.isTypeSupported('audio/webm;codecs=opus')) {
            options.mimeType = 'audio/webm;codecs=opus';
        } else if (MediaRecorder.isTypeSupported('audio/mp4')) {
            options.mimeType = 'audio/mp4'; 
        }
        
        mediaRecorder = new MediaRecorder(stream, options);
        audioChunks = [];

        mediaRecorder.ondataavailable = e => {
          if (e.data.size > 0) audioChunks.push(e.data);
        };

        mediaRecorder.onstop = async () => {
          const audioBlob = new Blob(audioChunks, { type: mediaRecorder.mimeType || 'audio/webm' }); 
          
          document.getElementById('decodingStatus').innerText = "⚙️ 提取四維度物理聲學特徵中...";

          let audioStats = null;
          try {
             audioStats = await analyzeAudioBlob(audioBlob);
          } catch(err) {
             console.warn("波形分析失敗，降級處理", err);
          }

          const reader = new FileReader();
          reader.readAsDataURL(audioBlob);
          reader.onloadend = function() {
            const base64Audio = reader.result; 
            outputTranslationResult(base64Audio, audioStats);
          };
          
          stream.getTracks().forEach(track => track.stop());
        };

        document.getElementById('decodingIdle').classList.add('hidden');
        document.getElementById('decodingActive').classList.remove('hidden');
        document.getElementById('decodingStatus').innerText = "🎙️ 正在錄製真實貓咪聲音...";

        mediaRecorder.start();

        setTimeout(() => {
           if(mediaRecorder.state === 'recording') {
              mediaRecorder.stop();
           }
        }, 3500);

      } catch (err) {
        console.warn("麥克風授權失敗", err);
        showToast("⚠️ 無法存取麥克風，已自動切換至模擬分析模式", "warning");
        startSimulatedDecode(); 
      }
  }