Under the Hood of the Radio 1 ΒιΆΉΤΌΕΔpage: the technical low-down
Post categories: ΒιΆΉΤΌΕΔpage,Μύ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 ΒιΆΉΤΌΕΔ attachment scheme, where staff are released to do another job within the ΒιΆΉΤΌΕΔ, 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 ΒιΆΉΤΌΕΔ. 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 ΒιΆΉΤΌΕΔ 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 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 ΒιΆΉΤΌΕΔ 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 , 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 ΒιΆΉΤΌΕΔ Online has been making websites so that we can 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 to determine the appropriate 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 ΒιΆΉΤΌΕΔ 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 ΒιΆΉΤΌΕΔ 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 . 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 ΒιΆΉΤΌΕΔ Music Showcase and use data provided by , 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 ΒιΆΉΤΌΕΔ 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 ΒιΆΉΤΌΕΔ 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 ΒιΆΉΤΌΕΔ who has contributed to the project and especially the who did the build.
Comment number 1.
At 27th Sep 2011, andrew hilton wrote:great job +100
Complain about this comment (Comment number 1)
Comment number 2.
At 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 28th Sep 2011, Jeremy Bailey wrote:great read! well done
Complain about this comment (Comment number 3)