第五章：流媒体音频协议 —— 当音频不再是一个文件

# 单码率纯音频 HLS（适合播客）
ffmpeg -i podcast.mp3 \
  -c:a aac -b:a 128k \
  -hls_time 10 \
  -hls_playlist_type vod \
  -hls_segment_filename 'segment_%03d.aac' \
  playlist.m3u8
 
# 多码率音频 HLS（自适应，适合音乐流媒体）
ffmpeg -i music.flac \
  -map 0:a -c:a aac -b:a 64k \
  -hls_time 10 \
  -hls_segment_filename 'lo/seg_%03d.aac' \
  lo/playlist.m3u8
 
ffmpeg -i music.flac \
  -map 0:a -c:a aac -b:a 128k \
  -hls_time 10 \
  -hls_segment_filename 'mid/seg_%03d.aac' \
  mid/playlist.m3u8
 
ffmpeg -i music.flac \
  -map 0:a -c:a aac -b:a 256k \
  -hls_time 10 \
  -hls_segment_filename 'hi/seg_%03d.aac' \
  hi/playlist.m3u8

import Hls from 'hls.js';
 
function playHLSAudio(audioEl, url) {
  // Safari 原生支持 HLS
  if (audioEl.canPlayType('application/vnd.apple.mpegurl')) {
    audioEl.src = url;
    return null;
  }
 
  // 其他浏览器用 hls.js（基于 MSE）
  if (Hls.isSupported()) {
    const hls = new Hls({
      maxBufferLength: 60,        // 最大前向缓冲 60 秒
      maxMaxBufferLength: 120,    // 绝对上限 120 秒
      startLevel: -1,             // -1 = 自动选择起始码率
      abrEwmaDefaultEstimate: 500000, // 初始带宽估算（bps）
    });
 
    hls.loadSource(url);
    hls.attachMedia(audioEl);
 
    // 监听码率切换事件
    hls.on(Hls.Events.LEVEL_SWITCHING, (event, data) => {
      console.log(`码率切换 → Level ${data.level}:`,
        hls.levels[data.level].bitrate, 'bps');
    });
 
    // 错误处理
    hls.on(Hls.Events.ERROR, (event, data) => {
      if (data.fatal) {
        switch (data.type) {
          case Hls.ErrorTypes.NETWORK_ERROR:
            console.error('网络错误，尝试恢复');
            hls.startLoad();
            break;
          case Hls.ErrorTypes.MEDIA_ERROR:
            console.error('媒体错误，尝试恢复');
            hls.recoverMediaError();
            break;
          default:
            console.error('不可恢复的错误');
            hls.destroy();
        }
      }
    });
 
    return hls;
  }
 
  console.error('当前浏览器不支持 HLS 播放');
  return null;
}

<?xml version="1.0" encoding="UTF-8"?>
<MPD xmlns="urn:mpeg:dash:schema:mpd:2011"
     type="static"
     mediaPresentationDuration="PT45M30S"
     minBufferTime="PT6S"
     profiles="urn:mpeg:dash:profile:isoff-on-demand:2011">
 
  <Period id="1" duration="PT45M30S">
    <!-- 音频自适应集 -->
    <AdaptationSet mimeType="audio/mp4" codecs="mp4a.40.2"
                   lang="zh" segmentAlignment="true">
 
      <!-- 低码率 -->
      <Representation id="audio-lo" bandwidth="64000" audioSamplingRate="44100">
        <AudioChannelConfiguration
          schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011"
          value="2"/>
        <BaseURL>audio_64k/</BaseURL>
        <SegmentTemplate
          initialization="init.mp4"
          media="seg_$Number%04d$.m4s"
          startNumber="1"
          duration="10000"
          timescale="1000"/>
      </Representation>
 
      <!-- 中码率 -->
      <Representation id="audio-mid" bandwidth="128000" audioSamplingRate="44100">
        <AudioChannelConfiguration
          schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011"
          value="2"/>
        <BaseURL>audio_128k/</BaseURL>
        <SegmentTemplate
          initialization="init.mp4"
          media="seg_$Number%04d$.m4s"
          startNumber="1"
          duration="10000"
          timescale="1000"/>
      </Representation>
 
      <!-- 高码率 -->
      <Representation id="audio-hi" bandwidth="256000" audioSamplingRate="44100">
        <AudioChannelConfiguration
          schemeIdUri="urn:mpeg:dash:23003:3:audio_channel_configuration:2011"
          value="2"/>
        <BaseURL>audio_256k/</BaseURL>
        <SegmentTemplate
          initialization="init.mp4"
          media="seg_$Number%04d$.m4s"
          startNumber="1"
          duration="10000"
          timescale="1000"/>
      </Representation>
 
    </AdaptationSet>
  </Period>
</MPD>

# 生成纯音频 DASH（多码率）
ffmpeg -i music.flac \
  -map 0:a -c:a aac -b:a 64k  -f dash -init_seg_name 'lo/init.mp4' -media_seg_name 'lo/seg_$Number%04d$.m4s' \
  -map 0:a -c:a aac -b:a 128k -f dash -init_seg_name 'mid/init.mp4' -media_seg_name 'mid/seg_$Number%04d$.m4s' \
  -map 0:a -c:a aac -b:a 256k -f dash -init_seg_name 'hi/init.mp4' -media_seg_name 'hi/seg_$Number%04d$.m4s' \
  -seg_duration 10 \
  -use_template 1 \
  -use_timeline 0 \
  manifest.mpd

import dashjs from 'dashjs';
 
function playDASHAudio(audioEl, mpdUrl) {
  const player = dashjs.MediaPlayer().create();
 
  player.initialize(audioEl, mpdUrl, /* autoPlay */ false);
 
  // 配置 ABR 策略
  player.updateSettings({
    streaming: {
      abr: {
        initialBitrate: { audio: 128 },    // 初始码率（kbps）
        autoSwitchBitrate: { audio: true }, // 自动切换
      },
      buffer: {
        bufferTimeAtTopQuality: 30,         // 最高码率时的缓冲目标（秒）
        bufferTimeAtTopQualityLongForm: 60, // 长内容的缓冲目标
      },
    },
  });
 
  // 监听码率切换
  player.on(dashjs.MediaPlayer.events.QUALITY_CHANGE_RENDERED, (e) => {
    if (e.mediaType === 'audio') {
      console.log('音频码率切换 →', e.newQuality);
    }
  });
 
  return player;
}

<audio src="https://radio.example.com:8000/stream" controls></audio>

async function getStreamMetadata(stationUrl) {
  const statusUrl = stationUrl.replace('/stream', '/status-json.xsl');
  const res = await fetch(statusUrl);
  const data = await res.json();
  const source = data.icestats?.source;
  return {
    title:     source?.title || '未知曲目',
    artist:    source?.artist || '',
    listeners: source?.listeners || 0,
    bitrate:   source?.bitrate || 0,
    genre:     source?.genre || '',
  };
}
 
// 定期轮询元数据（曲目切换时更新）
function pollMetadata(stationUrl, interval = 10000) {
  let currentTitle = '';
 
  setInterval(async () => {
    const meta = await getStreamMetadata(stationUrl);
    if (meta.title !== currentTitle) {
      currentTitle = meta.title;
      updateNowPlaying(meta); // 更新 UI
    }
  }, interval);
}

<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd"
     xmlns:podcast="https://podcastindex.org/namespace/1.0"
     version="2.0">
  <channel>
    <title>Web 音频技术播客</title>
    <description>深入 Web Audio API 与音频工程</description>
    <language>zh-cn</language>
    <itunes:author>白川</itunes:author>
    <itunes:image href="https://example.com/cover.jpg"/>
    <itunes:category text="Technology"/>
 
    <item>
      <title>第 1 期：Web Audio API 入门</title>
      <description>从 AudioContext 到完整音频图...</description>
      <enclosure
        url="https://cdn.example.com/ep01.mp3"
        length="45000000"
        type="audio/mpeg"/>
      <itunes:duration>45:32</itunes:duration>
      <itunes:episode>1</itunes:episode>
      <itunes:season>1</itunes:season>
      <pubDate>Mon, 01 Jan 2024 00:00:00 GMT</pubDate>
      <podcast:chapters url="https://cdn.example.com/ep01-chapters.json"
                        type="application/json+chapters"/>
    </item>
 
    <item>
      <title>第 2 期：音频可视化实战</title>
      <enclosure
        url="https://cdn.example.com/ep02.mp3"
        length="52000000"
        type="audio/mpeg"/>
      <itunes:duration>54:10</itunes:duration>
      <itunes:episode>2</itunes:episode>
      <pubDate>Mon, 08 Jan 2024 00:00:00 GMT</pubDate>
    </item>
  </channel>
</rss>

async function parsePodcastFeed(rssUrl) {
  const text = await fetch(rssUrl).then(r => r.text());
  const parser = new DOMParser();
  const doc = parser.parseFromString(text, 'text/xml');
 
  const channel = doc.querySelector('channel');
 
  const items = Array.from(doc.querySelectorAll('item')).map(item => ({
    title:    item.querySelector('title')?.textContent,
    desc:     item.querySelector('description')?.textContent,
    audioUrl: item.querySelector('enclosure')?.getAttribute('url'),
    fileSize: parseInt(item.querySelector('enclosure')?.getAttribute('length') || '0'),
    mimeType: item.querySelector('enclosure')?.getAttribute('type'),
    duration: item.querySelector('itunes\\:duration, duration')?.textContent,
    date:     item.querySelector('pubDate')?.textContent,
    episode:  item.querySelector('itunes\\:episode')?.textContent,
  }));
 
  return {
    title:       channel?.querySelector('title')?.textContent,
    description: channel?.querySelector('description')?.textContent,
    author:      channel?.querySelector('itunes\\:author')?.textContent,
    coverUrl:    channel?.querySelector('itunes\\:image')?.getAttribute('href'),
    items,
  };
}
 
// 使用
const feed = await parsePodcastFeed('https://example.com/podcast/feed.xml');
console.log(`${feed.title} - ${feed.items.length} 集`);
 
feed.items.forEach(ep => {
  console.log(`${ep.title} (${ep.duration}) → ${ep.audioUrl}`);
});

# FFmpeg 推送 HLS 直播流
ffmpeg -f avfoundation -i ":0" \
  -c:a aac -b:a 128k \
  -hls_time 6 \
  -hls_list_size 5 \
  -hls_flags delete_segments \
  -hls_segment_filename 'live/seg_%05d.aac' \
  live/stream.m3u8

// 简化的 WebRTC 音频收听端
async function listenToStream(signalingUrl) {
  const pc = new RTCPeerConnection({
    iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
  });
 
  // 接收远端音频轨道
  pc.ontrack = (event) => {
    const audio = document.getElementById('audioPlayer');
    audio.srcObject = event.streams[0];
    audio.play();
  };
 
  // 通过信令服务器交换 SDP
  const ws = new WebSocket(signalingUrl);
  ws.onmessage = async (msg) => {
    const data = JSON.parse(msg.data);
 
    if (data.type === 'offer') {
      await pc.setRemoteDescription(data);
      const answer = await pc.createAnswer();
      await pc.setLocalDescription(answer);
      ws.send(JSON.stringify(answer));
    }
 
    if (data.candidate) {
      await pc.addIceCandidate(data.candidate);
    }
  };
 
  pc.onicecandidate = (event) => {
    if (event.candidate) {
      ws.send(JSON.stringify({ candidate: event.candidate }));
    }
  };
}

class WSAudioPlayer {
  constructor(wsUrl) {
    this.ctx = new AudioContext();
    this.ws  = new WebSocket(wsUrl);
    this.ws.binaryType = 'arraybuffer';
    this._nextTime = 0;
    this._startOffset = 0.1; // 预缓冲 100ms
  }
 
  start() {
    this.ws.onmessage = async (event) => {
      try {
        const audioBuffer = await this.ctx.decodeAudioData(event.data);
        this._scheduleBuffer(audioBuffer);
      } catch (err) {
        console.warn('解码失败，跳过此块:', err);
      }
    };
  }
 
  _scheduleBuffer(buffer) {
    const source = this.ctx.createBufferSource();
    source.buffer = buffer;
    source.connect(this.ctx.destination);
 
    const now = this.ctx.currentTime;
    const startTime = Math.max(now + this._startOffset, this._nextTime);
    source.start(startTime);
    this._nextTime = startTime + buffer.duration;
  }
 
  stop() {
    this.ws.close();
    this.ctx.close();
  }
}