基于文件夹MP3搭建网站同步音频直播流的技术实现求助

Alright, let's figure out how to get your synchronized audio streaming up and running. That old PHP script you found is probably outdated (many older PHP streaming solutions don’t hold up to modern web standards), so here are two reliable approaches that’ll ensure all your visitors hear exactly the same part of your playlist at the same time:

This is the industry-standard combo for synchronized audio streaming—it’s built for this exact use case, so it’s rock-solid even with multiple listeners.

• Step 1: Install Icecast and Liquidsoap
  Use your server’s package manager to install both tools. For Debian/Ubuntu:

  sudo apt update && sudo apt install icecast2 liquidsoap
  

  During Icecast’s installation, you’ll be prompted to set an admin password—make sure to note that down.

• Step 2: Configure Liquidsoap to play your MP3 playlist
  Create a Liquidsoap script (e.g., stream.liq) with the following code:

  # Point this to your folder of MP3 files
  playlist = playlist("/path/to/your/mp3/folder", mode="normal", reload=30)
  
  # Encode the audio to MP3 for web playback
  encoded_stream = mp3.encode(bitrate=128, samplerate=44100, stereo=true, playlist)
  
  # Push the stream to your Icecast server
  output.icecast(
    %mp3,
    host="localhost",
    port=8000,
    password="your_icecast_source_password",
    mount="/live.mp3",
    encoded_stream
  )
  

  Replace /path/to/your/mp3/folder with the actual path to your MP3 files. You can find the your_icecast_source_password in Icecast’s config file (/etc/icecast2/icecast.xml, look for the <source-password> tag).

• Step 3: Start the stream and test
  Launch Liquidsoap with your script:

  liquidsoap stream.liq
  

  Now visit http://your-server-ip:8000/live.mp3 in your browser—you’ll hear the synchronized stream. Every visitor who accesses this URL will get the exact same live feed, no desync issues.

• Step 4: Embed the stream in your website
  Use a simple HTML5 audio tag to add the stream to your site:

  <audio controls autoplay>
    <source src="http://your-server-ip:8000/live.mp3" type="audio/mpeg">
    Your browser doesn’t support audio playback.
  </audio>
  

If you’d rather avoid dedicated streaming tools, a Node.js setup works for smaller audiences. It’s less robust than Icecast/Liquidsoap, but gets the job done.

• Step 1: Set up your project and install dependencies

  mkdir audio-stream-server && cd audio-stream-server
  npm init -y
  npm install fluent-ffmpeg express
  

• Step 2: Write the server script (server.js)
  This script will loop through your MP3 folder and stream the audio via HTTP:

  const express = require('express');
  const ffmpeg = require('fluent-ffmpeg');
  const fs = require('fs');
  const path = require('path');
  
  const app = express();
  const PORT = 3000;
  const MP3_DIR = '/path/to/your/mp3/folder';
  
  // Get a list of all MP3 files in the folder
  function getMP3Files() {
    return fs.readdirSync(MP3_DIR)
      .filter(file => file.toLowerCase().endsWith('.mp3'))
      .map(file => path.join(MP3_DIR, file));
  }
  
  // Serve the synchronized stream
  app.get('/live', (req, res) => {
    res.setHeader('Content-Type', 'audio/mpeg');
    res.setHeader('Transfer-Encoding', 'chunked');
  
    let playlist = getMP3Files();
    let currentTrackIndex = 0;
  
    // Play the next track when the current one ends
    function playNextTrack() {
      if (currentTrackIndex >= playlist.length) currentTrackIndex = 0;
      const currentTrack = playlist[currentTrackIndex++];
  
      ffmpeg(currentTrack)
        .format('mp3')
        .on('end', playNextTrack)
        .on('error', (err) => {
          console.error(`Error playing ${currentTrack}:`, err);
          playNextTrack();
        })
        .pipe(res, { end: false });
    }
  
    playNextTrack();
  });
  
  app.listen(PORT, () => {
    console.log(`Stream server running at http://localhost:${PORT}/live`);
  });
  

• Step 3: Launch and embed
  Start the server with node server.js, then embed the stream in your site using the same HTML5 audio tag, pointing to http://your-server-ip:3000/live.

Older PHP streaming scripts typically used "pseudo-streaming"—relying on browser cache and partial file requests to simulate a stream. This approach is inherently unstable: network delays, browser cache differences, and PHP’s short-lived process model all lead to desync between listeners. The solutions above push a single, unified live stream from the server, so every visitor gets the exact same audio at the exact same time.

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