How to create a good music web app / website?

Whether you create your own music or just share songs with a unique new and cool discovery experience, there are several approches to share music on your web app / website.

Soundsgood
Nov 14, 2018 · 5 min read

What 3 options do you have?

You can of course develop your own player, but you will need to spend weeks contacting each record labels to clear the music rights and updating your song catalog will not be that flexible. A quicker solution would be to use a turnkey webradio solution, but in the end, they can come up quite pricey and do not really follow people’s new music consumption habits.

Our vision at Soundsgood is to work with all streaming services instead (Spotify, Apple Music, Deezer, YouTube, SoundCloud, Napster, Qobuz, etc.). This way music rights are already cleared for tens of millions of tracks, and people can follow you and your playlists directly in the music apps they use everyday. You grow followers, retention, notoriety and virality.

Save time and resources with the Soundsgood universal Player

When listeners click play on a Soundsgood player, they can connect with their platform of choice. The music starts. They can save it. Follow you. Simple as that.

On smartphones, listeners are instantly redirected in their favorite streaming app where they can stream your content offline, follow your playlist, etc.

You can create Soundsgood players for free on Soundsgood.co since our paid licences apply to commercial brands.

You can share a Soundsgood player both as a page…

https://play.soundsgood.co/playlist/playlist-ID

…or as a widget to embed in your web app / website.

<iframe height="480" width="100%" src="playlist-ID" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay; encrypted-media" allowtransparency="true"></iframe>

Soundsgood constantly improves the player and handles all the complexity and technical issues related to each streaming service, browser, social network browser, social meta cards, desktop vs. smartphones, etc.

Building creative experiences around the Soundsgood player

You can create any experience with the Soundsgood widget player, just think of it as a tile that you can disguise into your own design. In the following example, the orange square is the Soundsgood widget, everything else can be yours:

PURPLE: Your design. / ORANGE : Soundsgood iframe.

The Soundsgood embed player focuses more on the playlist identity (artwork, title, etc.) than on the tracklist, because if tracks matters to you as a curator, nowadays people tend to prefer a leanback listening experience. It gives you more space below the widget to add interesting content such as describing the tracks with insightful reviews rather than just displaying tracks titles and duration. (Note: Listeners can still scroll within the widget to see the tracklist if needed.)

If your audience focuses more on tracks, you can embed the Soundsgood playlist page (instead of embedding the widget). As a result your listeners will be able to see the tracklist directly on desktops, and with a more comfortable view on smartphones. You can add a sticky header of your own to handle navigation to your other pages.

PURPLE: Your design. / ORANGE : Soundsgood iframe.

You can achieve such a result by replacing “/embed/” by “/playlist/” in your iframe code :

<iframe height="800" width="100%" src="playlist-ID" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay; encrypted-media" allowtransparency="true"></iframe>

Use Case: BACKPACKERZ

BACKPACKERZ is a famous French hip-hop music blog. They chose Soundsgood to power their music pages.

#01 — The main page on desktops

This page is 100% developed by BACKPACKERZ. There is no Soundsgood widgets yet.

#02 — The playlist page on desktops

You can see the Soundsgood Widget at the top. Everything else is custom.

#03 — Both pages on smartphones

How to customize the Soundsgood widget?

The Soundsgood widget player is fully customizable.

From the Soundsgood playlist editor you can customize the playlist title and artwork which are basically the sole design elements on the player. It is all about immersion and inspiration.

From the Embed Code you can customize :

  • The widget size with the native iframe “height” and “width” parameters
  • The Play button color (which also is used as a dominant color everywhere in the player) adding the URL parameter “color and the hexadecimal color code as a value.
<iframe height="480" width="100%" src="" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay; encrypted-media" allowtransparency="true"></iframe>
  • To hide your logo (since we are on your website, there is no need to display your logo at the top right of the widget) you can use the URL parameter “hideCurator” with the value “1” :
<iframe height="480" width="100%" src="" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay; encrypted-media" allowtransparency="true"></iframe>
  • To hide your playlist title (if your artwork is enough across all devices) you can use the URL parameter “hideTitle” with the value “1” :
<iframe height="480" width="100%" src="" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay; encrypted-media" allowtransparency="true"></iframe>

Final thoughts for developers

Dynamic iframe loading

As developers hate to repeat code everywhere, you can also embed a generic Soundsgood widget and dynamically load the “playlist-ID as a variable. This way you can avoid reloading the whole page when switching from one playlist to another for instance :

<iframe height="480" width="100%" src=" }}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen allow="autoplay; encrypted-media" allowtransparency="true"></iframe>

Tweaks for smartphones

If you are not satisfied by the default behavior of the iframe on desktops vs. smartphones, feel free to set up two different iframes for the same playlist and load them accordingly depending on the user’s device. This way you can achieve a 16:9 look on desktops but a 1:1 square on smartphones for instance.

For additional reading material, check out with other tips and resources such as minimal height or

Soundsgood

Written by

Stream the next music releases ♫ in early access -http://bit.ly/SoundsgoodPremieres