multiple instances of metadata

redrob commented 1 year ago

I currently have multiple player instances running on a single web page. However, I cannot seem to get the actual metadata to show for each instance (just the first instance) and I don't see a working example for that in the docs.

https://www.npmjs.com/package/icecast-metadata-player?activeTab=explore#instantiating

eshaz commented 1 year ago

The metadata will be passed to the callback you set for each instance. It's then up to you how you want to use that metadata. You can see a working example of multiple instances at dsmrad.io.

Are you trying to play multiple streams at the same time? It would help if you could post a link to your code.

redrob commented 1 year ago

Hi Ethan,

Exactly, I have multiple players and the capability of playing multiples at once which it currently does. However, I am just only able to get the metadata going for the first one.

<script src="icecast-metadata-player-1.16.3.main.min.js"></script>
<script>
  const onMetadata = (metadata) => {
    document.getElementById("metadata").innerHTML = metadata.StreamTitle;
  };
  const player =
    new IcecastMetadataPlayer(
      "http://host/mountpoint",
      { onMetadata }
    );
</script>
<script>
  const onMetadata2 = (metadata) => {
    document.getElementById("metadata2").innerHTML = metadata.StreamTitle;
  };
  const player2 =
    new IcecastMetadataPlayer(
      "http://host/mountpoint2",
      { onMetadata2 }
    );
</script>
<script>
  const onMetadata3 = (metadata) => {
    document.getElementById("metadata3").innerHTML = metadata.StreamTitle;
  };
  const player3 =
    new IcecastMetadataPlayer(
      "http://host/mountpoint3",
      { onMetadata3 }
    );
</script>
<script>
  const onMetadata4 = (metadata) => {
    document.getElementById("metadata4").innerHTML = metadata.StreamTitle;
  };
  const player4 =
    new IcecastMetadataPlayer(
      "http://host/mountpoint4",
      { onMetadata4 }
    );
</script>
<script>
  const onMetadata5 = (metadata) => {
    document.getElementById("metadata5").innerHTML = metadata.StreamTitle;
  };
  const player5 =
    new IcecastMetadataPlayer(
      "http://host/mountpoint5",
      { onMetadata5 }
    );
</script>
<body>
  <button onclick="player.play();"> Play </button>
  <button onclick="player.stop();"> Stop </button>
  <p> Current Channel: <span id="metadata"></span> </p>
<br>
  <button onclick="player2.play();"> Play </button>
  <button onclick="player2.stop();"> Stop </button>
  <p> Current Channel: <span id="metadata2"></span> </p>
<br>
  <button onclick="player3.play();"> Play </button>
  <button onclick="player3.stop();"> Stop </button>
  <p> Current Channel: <span id="metadata3"></span> </p>
<br>
  <button onclick="player4.play();"> Play </button>
  <button onclick="player4.stop();"> Stop </button>
  <p> Current Channel: <span id="metadata4"></span> </p>
<br>
  <button onclick="player5.play();"> Play </button>
  <button onclick="player5.stop();"> Stop </button>
  <p> Current Channel: <span id="metadata5"></span> </p>
</body>

eshaz commented 1 year ago

Thanks for the example. I found a bug in your code, where you are not assigning the metadata callbacks to the correct key in the options object.

Here's what you'll need to change:

<script src="icecast-metadata-player-1.16.3.main.min.js"></script>
<script>
  const onMetadata = (metadata) => {
    document.getElementById("metadata").innerHTML = metadata.StreamTitle;
  };
  const player =
    new IcecastMetadataPlayer(
      "http://host/mountpoint",
      { onMetadata }
    );
</script>
<script>
  const onMetadata2 = (metadata) => {
    document.getElementById("metadata2").innerHTML = metadata.StreamTitle;
  };
  const player2 =
    new IcecastMetadataPlayer(
      "http://host/mountpoint2",
-     { onMetadata2 }
+     { onMetadata: onMetadata2 }
    );
</script>
<script>
  const onMetadata3 = (metadata) => {
    document.getElementById("metadata3").innerHTML = metadata.StreamTitle;
  };
  const player3 =
    new IcecastMetadataPlayer(
      "http://host/mountpoint3",
-     { onMetadata3 }
+     { onMetadata: onMetadata3 }
    );
</script>
<script>
  const onMetadata4 = (metadata) => {
    document.getElementById("metadata4").innerHTML = metadata.StreamTitle;
  };
  const player4 =
    new IcecastMetadataPlayer(
      "http://host/mountpoint4",
-     { onMetadata4 }
+     { onMetadata: onMetadata4 }
    );
</script>
<script>
  const onMetadata5 = (metadata) => {
    document.getElementById("metadata5").innerHTML = metadata.StreamTitle;
  };
  const player5 =
    new IcecastMetadataPlayer(
      "http://host/mountpoint5",
-     { onMetadata5 }
+     { onMetadata: onMetadata5 }
    );
</script>
<body>
  <button onclick="player.play();"> Play </button>
  <button onclick="player.stop();"> Stop </button>
  <p> Current Channel: <span id="metadata"></span> </p>
<br>
  <button onclick="player2.play();"> Play </button>
  <button onclick="player2.stop();"> Stop </button>
  <p> Current Channel: <span id="metadata2"></span> </p>
<br>
  <button onclick="player3.play();"> Play </button>
  <button onclick="player3.stop();"> Stop </button>
  <p> Current Channel: <span id="metadata3"></span> </p>
<br>
  <button onclick="player4.play();"> Play </button>
  <button onclick="player4.stop();"> Stop </button>
  <p> Current Channel: <span id="metadata4"></span> </p>
<br>
  <button onclick="player5.play();"> Play </button>
  <button onclick="player5.stop();"> Stop </button>
  <p> Current Channel: <span id="metadata5"></span> </p>
</body>

redrob commented 1 year ago

Hey that works great Ethan thanks!

eshaz / icecast-metadata-js

multiple instances of metadata #180