search

eshaz / icecast-metadata-js

Browser and NodeJS packages for playing and reading Icecast compatible streaming audio with realtime metadata updates.
163 stars 20 forks source link

What is the source name for linking a visualizer? #61

Closed lexterror closed 3 years ago

lexterror commented 3 years ago

Hi I'm trying to attach a visualizer to your player but Im unsure of the source name.

Thank you!

eshaz commented 3 years ago

To attach a visualizer, it would be best to create the audio element first with an id, and then pass it in when instantiating IcecastMetadataPlayer. This is how the React demo page works.

<audio id="audio-source"><audio/>
<script>
  const player = new IcecastMetadataPlayer("https://example.com/stream", {
    audioElement: document.getElementById("audio-source")
  });

  // use the ID of your audio element anywhere else on your webpage
<script/>

If you have multiple streams on your webpage, and you want them to all use the same audio element, you'll need to call detachAudioElement() before creating another instance of IcecastMetadataPlayer. The demo uses the changeStation callback that is called when another station is clicked by: first stopping the player, then calling detachAudioElement() before creating a new instance with the new stream endpoint. https://github.com/eshaz/icecast-metadata-js/blob/4229bade017a78a2fa2991cf093101146661b089/src/demo/src/App.js#L22-L57

lexterror commented 3 years ago

It's working now!

Thank you!