BBC Playlister: exporting tracks

I'm Tom Kershaw, Senior Web Developer for BBC Playlister.

We recently launched a beta version of BBC Playlister (read more about that in Chris’s blog post) and I wanted to share with you a bit more about how we built the export process.

Discovering new music is one of the main features of BBC Playlister, however we also wanted to give you the option to listen to full length tracks through the music service of your choice. Whilst the BBC plays a rich and diverse range of music on a daily basis, making that music available to listen to online on the BBC website isn't currently possible due to rights issues. With this in mind we developed the export process allowing you to export your playlist either Spotify, YouTube & Deezer.

There are plenty of places where you can add tracks to your playlist - your favourite BBC Radio station homepage, the tracklist of your favourite DJ's show page or from the discover tab of BBC Playlister itself. Once you've added a few tracks, then you're ready to export and listen - all you need to do is is click on 'export your playlist' in BBC Playlister, agree to the terms and conditions and select the service of your choice to start listening.

The terms and conditions exist partly because we cannot guarantee external services will conform to the same editorial compliance standards as the BBC, and we require our users to acknowledge that they are aware of this and accept it before continuing.

Once you’ve created your playlist we use our partner APIs to match the track based on the track title and artist’s name. To ensure the best possible accuracy when matching tracks we make sure we get a valid track ID back from the string match against the partner API and then go on to build the playlist by the relevant means for that service.

We make use the OAuth process, meaning the user authorises us to write directly into partner accounts on YouTube or Deezer (more about Spotify later). The user signs into their chosen service and gives their one-time-approval to allow BBC Playlister to write playlists to their account (this approval can easily be revoked). There are three of advantages to this:

1. The playlist is permanently stored in the account

2. Playlists can be made private

3. This provides a good user experience across multiple devices - mobile, tablet & desktop

The main benefit of using OAuth is that we don't have to store any 3rd party authentication information, but still retain access to accounts through APIs.

Below is a diagram explaining the export process for YouTube and Deezer. This shows the user flow from when you sign up to when you export tracks. The process is:

Sign in and add tracksExport your playlistAgree to the terms and conditionsTracks are matched View your playlist on partner service

BBC Playlister export process to You Tube and Deezer

At the time of development Spotify didn’t use OAuth so we used the method they developed to open the playlist in the BBC Playlister Spotify application.

Currently we export to the desktop and mobile applications of YouTube & Deezer - however with Spotify we developed an application on their platform. The BBC Playlister Spotify application serves a number of goals:

Allowing you to discover new music through featured playlists across BBC Radio & TVBrowse BBC Playlists such as Zane Lowe on Radio 1 to Nile Rodgers on BBC FourManage your exported BBC Playlist through Spotify and listen to tracks

 

BBC Playlister’s Spotify application is built with conventional web technologies - HTML, CSS and JavaScript. Although the BBC Playlister team built the application from the ground up, Spotify were on hand to answer questions and point us in the right direction when required with some useful guidelines.

One of the first challenges when we started to develop the BBC Playlister Spotify App was to decide the structure and technologies to use. We chose Handlebars as the template engine, loading the templates dynamically via AJAX. The BBC Playlister Spotify App is composed of five templates (Home, Browse, Playlist, Your Tracks and Offline). All of them are loaded dynamically avoiding a long load time.

In relation to the JavaScript structure we had a separate module for each view and some additional modules to manage BBC Playlister API calls, use of Spotify components and helpers. We can recommend Spotify components, which enables rapid development of an app without having to worry about the details of design and implementation. On BBC Playlister we made extensive use of components such as ‘Image and Player’, ‘List’, ‘Tabs and Buttons’.

As a team we’re very proud of BBC Playlister and excited to be working with partners like Spotify, YouTube and Deezer. There’s lots of things on our roadmap and we’re looking forward to releasing some great new features in the near future.

Tom Kershaw is Senior Web Developer, BBC Playlister