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 大象传媒 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鈥檚 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鈥檒l 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鈥檚 success. To create a rich real-time experience harnessing the uniqueness of Radio 1 and 1Xtra鈥檚 interactivity, we鈥檇 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鈥檚 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鈥檚 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鈥檙e 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鈥檚 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鈥檙e played out of the radio music playout system. The beautiful 鈥減ackshots鈥 (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 鈥渓ove鈥 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鈥檝e 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鈥檚 鈥渄ocument 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鈥檝e 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鈥檚 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鈥檚 been quite a ride, and I鈥檓 really looking forwards to see how both the audience and the stations engage with what we鈥檝e 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)