Web player UI update

Leon -

We've released an update to our embedded web player that greatly improves the user experience for listeners.

Stronger "Play" call to action

First and foremost, we wanted to make the "Play" call to action much stronger. To this end we've moved the play button up to the top left of the player, next to the title. We've also switched it to an encircled icon style that uses the highlight colour. These changes combine to really make the play button pop out.

Improved loading and playback indication

We've added several animations to provide feedback to listeners:

  • When clicking play, the icon is replaced with an animated "loading" animation.
  • Browsers typically pre-load sections of the audio in the background. Our progress bar now shows how far audio has been pre-loaded.
  • A small animation is displayed next to the title during playback to further reinforce a sense of activity. This works especially well for live-streaming playback where there is no progress bar.

Large play button mode

An optional mode that hides the logo area and replaces it with a large play button is now available for podcast and stream players. This works great for pages that already contains branding outside the embed, but needs a very strong "Play Now" call to action.

More informative quality selector

Our quality selector has been updated to show the audio bitrate and the amount of data required per hour for each quality setting. We hope this information provides more meaningful information to end-users and helps them choose the right one for their needs.

Scrolling title

Stream players already supported showing the "Now playing" information as a scroller. We've extended this functionality to the podcast player for episodes with long titles.

Series support

Our channel embed player now properly handles "Series" type of podcasts where episodes should be listed from first to last instead of newest first. Episode publish dates are replaced with the more relevant episode numbers.

Faster load times

Finally, we've taken a deep look at the performance of our embeds and managed to reduce the average response time to serve an embed from ±250ms down to less than 50ms!