Hey there! I’ve been wrestling with this exact cross-browser audio recording issue—especially getting it to work reliably on iOS—so I totally get your frustration. Let’s break down the actionable solutions that I’ve tested successfully across Chrome, Firefox, Safari, and their iOS counterparts.

Key Background First #

• iOS browsers (even Chrome/Firefox on iOS) use WebKit under the hood, so they share Safari’s core restrictions. As of 2024, Safari 14.1+ (and thus iOS 14.5+) does support the MediaRecorder API, but there are critical gotchas to work around.
• All browsers require user-initiated interaction (like a button click/tap) to access media devices—this is non-negotiable on iOS, where auto-play/auto-access is blocked for privacy and battery reasons.

Working Implementation Steps #

1. Use MediaRecorder with Format Fallbacks #

WebM works great on Chrome/Firefox, but iOS/Safari prefers audio/mp4 (AAC codec). Detect the supported format first to avoid compatibility crashes:

// Check supported MediaRecorder formats
function getSupportedFormat() {
  const options = [
    { mimeType: 'audio/mp4' },
    { mimeType: 'audio/webm;codecs=opus' },
    { mimeType: 'audio/wav' }
  ];
  for (const option of options) {
    if (MediaRecorder.isTypeSupported(option.mimeType)) {
      return option;
    }
  }
  return null;
}

2. Initialize Recording with User Interaction #

On iOS, you must trigger media device access directly from a user click/tap event. Here’s a minimal, tested working example:

<button id="recordBtn">Start Recording</button>
<button id="stopBtn" disabled>Stop Recording</button>
<audio id="previewAudio" controls style="margin-top:10px;"></audio>
<input type="hidden" id="audioBlobInput" name="voiceMessage">

<script>
let mediaRecorder;
let recordedChunks = [];
const recordBtn = document.getElementById('recordBtn');
const stopBtn = document.getElementById('stopBtn');
const previewAudio = document.getElementById('previewAudio');
const audioBlobInput = document.getElementById('audioBlobInput');

recordBtn.addEventListener('click', async () => {
  try {
    // Request microphone access (user interaction required!)
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    
    const format = getSupportedFormat();
    if (!format) {
      alert('Audio recording not supported on this browser');
      return;
    }
    
    mediaRecorder = new MediaRecorder(stream, format);
    
    // Collect recorded data chunks
    mediaRecorder.ondataavailable = (e) => {
      if (e.data.size > 0) {
        recordedChunks.push(e.data);
      }
    };
    
    // Process recording once stopped, save to form
    mediaRecorder.onstop = () => {
      const audioBlob = new Blob(recordedChunks, { type: format.mimeType });
      // Create preview URL for users to listen back
      const audioUrl = URL.createObjectURL(audioBlob);
      previewAudio.src = audioUrl;
      
      // Convert blob to base64 for hidden form input
      const reader = new FileReader();
      reader.onload = () => {
        audioBlobInput.value = reader.result; // Stores as base64 string
      };
      reader.readAsDataURL(audioBlob);
      
      // Reset chunk array for next recording
      recordedChunks = [];
    };
    
    // Start recording
    mediaRecorder.start();
    recordBtn.disabled = true;
    stopBtn.disabled = false;
  } catch (err) {
    console.error('Error accessing microphone:', err);
    alert('Could not access microphone. Please check your permissions settings.');
  }
});

stopBtn.addEventListener('click', () => {
  mediaRecorder.stop();
  // Stop all stream tracks to release the microphone
  mediaRecorder.stream.getTracks().forEach(track => track.stop());
  recordBtn.disabled = false;
  stopBtn.disabled = true;
});
</script>

3. iOS-Specific Gotchas to Fix #

• HTTPS Requirement: iOS blocks media device access on non-HTTPS sites (localhost is allowed for local development, though).
• Permissions Prompt: Users need to explicitly grant microphone access—make sure your UI clearly explains why you need this permission to avoid users denying it.
• Background Recording: iOS will stop recording if the browser tab goes to the background; there’s no way around this due to system-level restrictions.
• Chrome/Firefox on iOS: Since they use WebKit’s engine, they follow the same rules as Safari—don’t waste time testing Chrome-only APIs here.

4. Fallback for Older Browsers #

If you need to support browsers older than Safari 14.1, use a polyfill like recordrtc (note: polyfills may have limited functionality on iOS). Alternatively, provide a fallback option for users to upload pre-recorded audio files.

Saving to Form and Submitting #

Once you have the base64 string (or Blob), you can:

• Submit the form normally with the hidden input containing the base64 string.
• Or use FormData for AJAX submissions:

const formData = new FormData();
formData.append('voiceMessage', audioBlob, 'voice-message.mp4');
// Submit via fetch API
fetch('/submit-form-endpoint', {
  method: 'POST',
  body: formData
});

Final Tips #

• Always test on real iOS devices—simulators can have inconsistent media behavior.
• Keep an eye on WebKit updates; they’ve been steadily improving media API support.

内容的提问来源于stack exchange，提问作者Travis Johnston