mindflowgo / infoscape

An interactive teaching tool to allow students to collaborate, and learn online resources together.
https://infoscape.live
MIT License
0 stars 0 forks source link

Audio Player #11

Open mindflowgo opened 5 years ago

mindflowgo commented 5 years ago

There are 2 logical plans for this, possible both:

  1. Use a pre-built player that can stream audio streams (ex. like Shoutcast).
  2. Use a spotify plugin (they provide an embedded player).
mindflowgo commented 5 years ago

Looked into the Shoutcast platform and they are using jPlayer. It seems to be a decent jQuery plugin and fairly up-to-date so I recommend we continue using it. At the very least we can fully play Shoutcast streams.

We also want to have an inconspicious player and possibly show the playlist.

mindflowgo commented 5 years ago

For spotify we gather the playlists, then just mod the iFrame so they are normally only a button -- the style includes those styling changes: <iframe src="https://open.spotify.com/embed/playlist/37i9dQZF1DXdIpacQDPDV5" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media" style="overflow: hidden; width: 80px; height: 80px; border: 1px solid gray;"></iframe>

mindflowgo commented 5 years ago

At point fo react, there's a cool clock here: https://codepen.io/studiojvla/pen/vXYpRN