How to Stream Full Audio on your Website from Spotify and Apple Music

Image for post

9 years ago I launched the Stratus player at SoundCloud. The idea was simple: an audio player that lived on the footer of your website streaming full tracks for visitors. Since then, the market, technologies, and opportunties for artists have greatly evolved. It’s not enough to simply stream your music, you should also be increasing play counts, encouraging follows, being added to playlists, and getting paid. Wouldn’t you know it! As a developer, the holy grail was simple: if a user was already paying for a streaming service, they should have the ability to stream that music anywhere by logging into their account. Well, technology has finally caught up and I’m happy to introduce Stream, a music player for your website which can stream full tracks to Spotify and Apple Music subscribers. I encourage you to head there and test the player. If you’re feeling brave, sign-up and create your own. I welcome all feedback and feature requests.

Stream would not be possible if it wasn’t for the hard work of both the Spotify and Apple Music platform teams. For Spotify, it was the introduction of their excellent Web Playback SDK that made this possible. For Apple, it was the release of MusicKit JS which I began covering as soon as it launched in 2018. It was in that moment that I finally realized that the two biggest streaming services had made external playback available to subscribers and got to work on Stream.

Image for post

The design of the player was modeled off of my work on Stratus but I was also inspired by many classic examples of footer players which I collect like Pokemon. Pitchfork has a beautifully designed player with all the stellar iconography you’ve come to expect from their brand. I quite like how they handled the artwork as well, making it full bleed to the player height. SoundCloud itself has also added a footer player to their website which has a rather odd arrangement of elements but still works nicely. I also recall the nice UI work of the exfm team and even looked at how Medium itself handled their footer bars.

On the technology side, I built an underlying engine Vue.js component which handles the authentication and playback for both Spotify and Apple Music. It was actually a lot of fun to build these together because I now have a greater understanding of the similarities and differences to each service’s approach to this problem. For example, Spotify chose to add the often used “toggle playback” functionality right into their SDK but Apple Music suggests you handle that yourself.

togglePlay() {
// Apple
if (this.type == 'apple') {
if (this.playing) {
this.apple.music.pause()
} else {
this.apple.music.play()
}
}
// Spotify
if (this.type == 'spotify') {
this.spotify.player.togglePlay()
}
}

The web app (and player) is a Nuxt.js powered application talking to a Serverless backend which lives on AWS. Amazon Cognito powers user registration and authentication which was easily integrated thanks to the excellent Amplify library. In the end, the hardest part of pulling this off was simply designing the web app interface in Figma and I will tweak it for this night and all the nights to come. If you’re curious about the underlying technology, please hit me up on Twitter and I would be happy to share what I’ve learned.

Written by

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store