icecast-metadata-js

Javascript library that reads, parses, and queues real-time metadata from an Icecast stream.

React Demo   |   HTML Demo   |   "Bare Minimum" HTML Demo    |   Vintage Computers
HTML Demo Source for this demo

See each section below for a demo and test page for each module.

The source code for these modules and other Icecast compatible tools are available at icecast-metadata-js

IcecastMetadataPlayer
Select a stream in the Stream Endpoint dropdown, or type in a url and press Play.
Hover over each item in the fieldset for additional information.

Controls
Stream Endpoints
Authentication
Current Endpoint
Metadata Types
Playback Method / Buffering
ICY Metadata Options
Retry Options

Metadata
Current Time Now Playing

Supported Codecs
Codec Playback Method
MediaSource HTML5 Audio Web Audio

    IcecastMetadataPlayer will automatically select the playback method depending on browser compatibility.

  • MediaSource
    Uses one request to read metadata and play audio.
    MediaSource compatibility is extended to include MPEG, AAC, and Ogg formats by using mse-audio-wrapper
  • HTML5 Audio
    Uses two requests, one for HTML5 audio, and another to read metadata.
  • Web Audio
    Plays the audio using the Web Audio API. Uses wasm-audio-decoders to decode the audio in a Web Worker.

Usage / Example
  1. Download the latest build, or install via NPM.
  2. Include the file in a <script> tag in your html.
  3. IcecastMetadataPlayer is made available as a global variable in your webpage to use wherever.
  4. Checkout the README for more information.
Example 
      <script src="icecast-metadata-player-1.17.9.main.min.js"></script>
      <script>
        const onMetadata = (metadata) => {
          document.getElementById("metadata").innerHTML = metadata.StreamTitle;
        };
        const player = 
          new IcecastMetadataPlayer(
            "https://dsmrad.io/stream/isics-all", // stream endpoint
            { onMetadata }                        // options (onMetadata callback)
          );
      </script>
      <body>
        <button onclick="player.play();"> Play </button>
        <button onclick="player.stop();"> Stop </button>
        <p> Now Playing: <span id="metadata"></span> </p>
      </body>
IcecastMetadataStats
The URL selected in the Stream Endpoint input in the IcecastMetadataPlayer demo will update the URL for IcecastMetadataStats.
Hover over each item in the fieldset for additional information.

Controls
Sources
Source Auto Manual Source Endpoint

Stats

Usage / Example
  1. Download the latest build, or install via NPM.
  2. Include the file in a <script> tag in your html.
  3. IcecastMetadataStats is made available as a global variable in your webpage to use wherever.
  4. Checkout the README for more information.
Example 
      <script src="icecast-metadata-stats-0.1.12.min.js"></script>
      <script>
        const onStats = (stats) => {
          document.getElementById("stats").innerHTML = stats.icy.StreamTitle;
        };
        const stats = 
          new IcecastMetadataStats(
            "https://dsmrad.io/stream/isics-all", // stream endpoint
            { onStats, sources: ["icy"] }         // options (stats callback, stats sources)
          );
        stats.start();
      </script>
      <body>
        <p> Now Playing: <span id="stats"></span> </p>
      </body>