Under the Hood of the Radio 1 Homepage: the technical low-down
Post categories: Homepage, Radio, Radio & Music, Radio 1, open source
| 14:42 UK time, Tuesday, 27 September 2011
Radio 1 DJ Greg James shows his love for the new homepage
Last year I took advantage of the BBC attachment scheme, where staff are released to do another job within the BBC, and went on attachment with the Radio 1 and 1Xtra Interactive team. As a developer, it was a fantastic opportunity to spend time with an amazing editorial team in one of the most vibrant corners of the BBC. I got to work on some amazing projects, such as the Live Lounge, a new mobile site and crazy things like hooking up a slot car racing set to Twitter.
During this time I got involved in a rather ambitious project: a new homepage for Radio 1 and 1Xtra. The editorial proposition laid out by Chris Johnson’s team focused on three priorities for the new homepages: the live experience, promotion and personalisation. Yasser has already described the design process, and in this blog post I’ll go under the hood to describe some of the technical aspects of achieving the vision.
Live Experience
We know that the majority of our users come to our site to listen live, so the live experience would be pivotal to the product’s success. To create a rich real-time experience harnessing the uniqueness of Radio 1 and 1Xtra’s interactivity, we’d have to bring updates to the user without a page refresh - whether that was a track being played, a message from the studio or a photo of a celebrity who’s just popped in for a chat. This was a significant technical challenge. Building on experience derived from the radio visualisation trials, we decided to use the BBC PushFeeds technology.
With PushFeeds, when your browser visits the new Radio 1/1Xtra homepage it keeps a connection open to the server. When new content is published, the server is able to push a message over this connection to the browser, where it can add the content on the page without requiring a page refresh.
In more technical terms, Pushfeeds is based on the open protocol XMPP PubSub and enables our servers to broadcast messages to a Javascript client in the web browser. This client uses the latest HTML 5 WebSockets technology when available but falls back to Flash on older browsers.
Promotion - from the studio to the website
In order to see this content you need to have both Javascript enabled and Flash Installed. Visit BBC Webwise for full instructions. If you're reading via RSS, you'll need to visit the blog to access this content.
Video (without sound) of administration system in action.
In order to support this real-time experience it’s crucial to have an intuitive administration system. When a DJ talks up online content on air, our producers need to be able to get it on the homepage within minutes if not seconds if we’re going to have any meaningful engagement with the audience.
Core to the admin interface is a bookmarklet, a form of bookmark that instead of bookmarking a web page executes a small program. Typically implemented in Javascript, when a bookmarklet is clicked on it performs a particular action instead of just taking the browser to the bookmarked page.
As you can see in the video above, the admin bookmarklet allows producers to go to the webpage containing the content they want to promote, push the bookmarklet button and immediately go to the homepage admin interface. This automatically pre-populates a form with the content details so it's ready to publish.
In order to pull information out of the page it exploits the way that BBC Online has been making websites so that we can easily point at things and fetch information about a multitude of objects ranging from programmes, video and audio clips to DJs, artists and tracks.
Behind the scenes the admin system uses the URL to determine the appropriate API to query so it can fetch metadata about the content and present it to producers. They are able to edit the message if necessary and then publish it, at which point it’s broadcast over PushFeeds to your browser. This streamlined process is also vital when scheduling content in advance to cater for overnight specialist shows or prerecords.
Artist info panel about "Example"
Tracks are published automatically when they’re played out of the radio music playout system. The beautiful “packshots” (album art) are taken from the Radio 1/1Xtra Chart and Playlist. We also display information about tracks’ chart and playlist history. Tracks are also matched to BBC Music using MusicBrainz identifiers. This lets the system present information about the artist, such as their biography, latest album reviews and clips.
Personalisation
Finally, we wanted to offer users a personalised view of Radio 1 and 1Xtra. Using the BBC Social services, users are able to bookmark their favourite DJs and shows. On top of that, users are able to “love” content, which is stored against their user id and allows us to track the most loved items across the sites.
When a user loves some content, the homepage presents them with other content that they might like. To achieve this, we’ve built a light touch recommendation engine using the open search server Solr. Each piece of content entered via the admin system has a title and description stored in the Solr index. To return recommendations, we start with Solr’s “document to document similarity” feature on the content titles and descriptions.
Depending on the source object and the results, the application then applies predefined rules to improve the quality of the recommendations that are returned.
For example, when it comes to music recommendations we’ve followed the lead of the BBC Music Showcase and use data provided by The Echo Nest, a music intelligence platform, to find any content related to similar artists by keying on an artist’s MusicBrainz identitifier.
Solr also powers the rich autocomplete search feature that allows users to search for content by keyword.
The editorial team decided to place the personalisation features behind BBC Identity, requiring users to be signed in to select their favourite DJs and love content. The rationale is that everyone can access the content but users have to register if they want to interact with it. This has already had an impact, as can be seen in this tweet from the BBC ID team:
In summary ...
As a developer, working on the new Radio 1 and 1Xtra homepages has been a fantastic opportunity to apply technology to solve some really challenging editorial ambitions. It’s been quite a ride, and I’m really looking forwards to see how both the audience and the stations engage with what we’ve built.
Patrick Sinclair is a Senior Software Engineer in Radio and Music for FM&T Programmes On Demand. Many thanks to everyone across the BBC who has contributed to the project and especially the team at Kite who did the build.
Comment number 1.
At 17:37 27th Sep 2011, andrew hilton wrote:great job +100
Complain about this comment (Comment number 1)
Comment number 2.
At 17:44 27th Sep 2011, John_E_Debt wrote:This is an amazing leap forward for r1 and for radio stations or digital music providers in general - splendid work by you and Chris Johnson
Complain about this comment (Comment number 2)
Comment number 3.
At 09:53 28th Sep 2011, Jeremy Bailey wrote:great read! well done
Complain about this comment (Comment number 3)