寻求单页网站麦克风音频录制回播功能的JS代码实现指引

Hey there! Since you're comfortable with HTML/CSS but new to JavaScript, let's break down exactly what you need to build this feature, plus where to focus your code hunting.

1. Core: Microphone Capture + Real-Time Playback #

Your starting point with the "Record audio and play it" snippet is perfect—we'll build on that using two key web APIs:

• navigator.mediaDevices.getUserMedia: Requests permission to access the user's microphone and returns an audio stream.
• HTML5 <audio> element: Can directly consume this stream for real-time playback.

Here's a minimal working example you can adapt:

<!-- HTML -->
<audio id="liveMicAudio" autoplay controls muted></audio>
<button id="startCapture">Start Mic Capture</button>

<script>
const startBtn = document.getElementById('startCapture');
const liveAudio = document.getElementById('liveMicAudio');

startBtn.addEventListener('click', async () => {
  try {
    // Request microphone access (user will see a permission prompt)
    const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
    // Bind the stream to the audio element for instant playback
    liveAudio.srcObject = audioStream;
    // Unmute once stream is active (browser security requires user interaction first)
    liveAudio.muted = false;
  } catch (error) {
    console.error('Failed to access microphone:', error);
    alert('Could not access your microphone—check browser permissions!');
  }
});
</script>

Note: The initial muted attribute is a browser security rule—autoplaying unmuted audio without user interaction is blocked. We unmute it after the user clicks the button.

2. Chromecast Integration: Cast Audio + Website Content #

To cast both your site's content and the live mic audio to a Chromecast, you'll use the Google Cast Sender API. Here's how to approach it:

Step 1: Load the Cast SDK #

Add this script to your HTML <head> to load the Cast framework:

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

Step 2: Initialize Cast Context & Session #

This code sets up the Cast connection, lets users select a device, and casts your site's content (which will include the live mic playback):

// Wait for the Cast API to load fully
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initCast();
  }
};

function initCast() {
  const castContext = cast.framework.CastContext.getInstance();
  
  // Configure with the default web receiver (works for casting websites)
  castContext.setOptions({
    receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });

  // Add a cast button to your UI (create a <button id="castBtn">Cast</button> in HTML)
  const castBtn = document.getElementById('castBtn');
  castBtn.addEventListener('click', () => {
    // Request a Cast session (triggers device selection popup)
    castContext.requestSession()
      .then(session => {
        console.log('Connected to Chromecast:', session);
        // Cast your current website to the receiver
        const mediaInfo = new chrome.cast.media.MediaInfo(window.location.href, 'text/html');
        const loadRequest = new chrome.cast.media.LoadRequest(mediaInfo);
        
        session.loadMedia(loadRequest)
          .then(() => console.log('Site content cast successfully'))
          .catch(err => console.error('Failed to cast content:', err));
      })
      .catch(err => console.error('Could not connect to device:', err));
  });
}

Important note: If you cast the website directly, the Chromecast will use its own microphone (not your local one). To fix this, you need to send your local mic's audio stream to the Chromecast directly—see the next section.

Fix: Cast Local Mic Audio to Chromecast #

To send your local mic's audio to the Chromecast (instead of using the TV's mic), focus on these steps:

1. Capture the local audio stream (as we did earlier)
2. Encode the stream into a castable format (like WebM) using MediaRecorder
3. Send this encoded stream to the Chromecast via the Cast API

This is a bit more advanced, but here's the key direction to explore:

• Look up MediaRecorder examples for real-time audio encoding into Blob chunks
• Learn how to convert these Blob chunks into a media source compatible with the Cast API
• Load this media source into the Cast session instead of your website URL

Key Code Hunting Directions #

Since you're new to JS, prioritize these areas first:

• Media Stream Basics: Search for getUserMedia audio-only examples to get comfortable with stream handling.
• Google Cast Sender API: Look for "Cast Sender API live audio stream" tutorials to learn how to cast real-time audio.
• MediaRecorder API: Study how to record live streams and process Blob output for casting.

Start with the basic playback code to build confidence, then layer in the Chromecast integration step by step.

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