Skip to content

Instantly share code, notes, and snippets.

@metade
Created October 25, 2012 16:33
Show Gist options
  • Save metade/3953880 to your computer and use it in GitHub Desktop.
Save metade/3953880 to your computer and use it in GitHub Desktop.
Best Bits listening experience (AKA Radio TV)
<!DOCTYPE html>
<html>
<head>
<title>Radio TV</title>
<script src="require.js" type="text/javascript"></script>
<script type="text/javascript">
bbcRequireMap = {
'jquery-1' : 'http://static.bbci.co.uk/frameworks/jquery/0.1.8/sharedmodules/jquery-1.6.2',
'swfobject-2' : 'http://static.bbci.co.uk/frameworks/swfobject/0.1.3/sharedmodules/swfobject-2',
'demi-1' : 'http://static.bbci.co.uk/frameworks/demi/0.9.8/sharedmodules/demi-1'
};
require({
baseUrl: 'http://static.bbci.co.uk/',
paths: bbcRequireMap,
waitSeconds: 30
});
</script>
<style>
body { background: white url(radiotv.jpg) no-repeat; width: 1024px; }
#emp1 { position: absolute; top: 300px; left: 370px; }
#stations {
position: absolute;
top: 300px;
left: 753px;
width: 110px;
font-size: 2em;
}
#details {
font-family: arial;
padding: 5px;
background: white;
width: 50%;
margin-left:auto;
}
</style>
</head>
<body>
<div id="emp1">Choose a station</div>
<div id="details">
<h2 id="title"></h2>
<p id="synopsis"></p>
</div>
<select name="selectionField" id="stations">
<option value="bbc_radio_one">Radio 1</option>
<option value="bbc_radio_two">Radio 2</option>
<option value="bbc_radio_three">Radio 3</option>
<option value="bbc_radio_four">Radio 4</option>
<option value="bbc_radio_five_live">5live</option>
<option value="bbc_6music">6music</option>
<option value="bbc_1xtra">1Xtra</option>
<option value="bbc_london">London</option>
</select>
<script type="text/javascript">
var current = 0;
var programmes;
require(['jquery-1'], function($) {
function setupStation(station) {
$.getJSON('http://jsonp.jit.su/?callback=?&url=http://www.bbc.co.uk/radioassets/latest/' + station + '/clips.json', function(data) {
programmes = data.programmes;
programme = programmes[0];
setupProgramme(programme);
setupEmp("http://www.bbc.co.uk/iplayer/playlist/" + programme.pid);
});
}
$("#stations").change(function() {
setupStation($(this).val());
});
setupStation('bbc_radio_one');
});
function setupProgramme(programme) {
require(['jquery-1'], function($) {
$('#title').text(programme.title);
$('#synopsis').text(programme.medium_synopsis);
});
}
function setupEmp(playlist) {
require(['http://www.bbc.co.uk/emp/bump/define.js'], function (embeddedMedia) {
var emp = new embeddedMedia.Player();
emp.setWidth("345");
emp.setHeight("280");
emp.setDomId("emp1");
emp.setPlaylist(playlist);
emp.setConfig("http://www.bbc.co.uk/emp/docs/demos/xml/jsapi_config.xml");
emp.set("config_settings_autoPlay", true);
emp.set("config_settings_showPopoutButton", false);
emp.set("config_settings_suppressRelatedLinks", true);
emp.write();
emp.onMediaPlayerInitialised = function() {
console.log('onMediaPlayerInitialised');
emp.register('onPlaylistCompleted');
emp.onPlaylistCompleted = function(e, emp) {
current++
var programme = programmes[current];
setupProgramme(programme);
setupEmp("http://www.bbc.co.uk/iplayer/playlist/" + programme.pid);
};
}
});
}
</script>
<small>http://www.flickr.com/photos/joimson/2437158796/</small>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment