Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: 920b142da6
Fetching contributors…

Cannot retrieve contributors at this time

executable file 190 lines (180 sloc) 8.38 kb
<!doctype html xmlns:fb="">
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>Beatbar - Media player inside the browser address bar</title>
<meta name="description" content="">
<meta name="author" content="Jai Pandya">
<meta name="viewport" content="width=device-width">
<link href='' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/style.css">
<!-- open graph meta tags -->
<meta property="og:title" content="Beatbar - media player inside the browser address bar" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
<script src="//"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>
<!-- include SM2 library -->
<script type="text/javascript" src="js/libs/soundmanager/soundmanager2.js"></script>
<script src="js/libs/keymaster.js"></script>
<!-- Initialize soundManager -->
<script type="text/javascript">
soundManager.url = 'swf/';
soundManager.flashVersion = 9; // optional: shiny features (default = 8)
soundManager.useFlashBlock = false; // optionally, enable when you're ready to dive in
soundManager.debugFlash = false;
soundManager.debugMode = false;
soundManager.useConsole = true;
<script src="js/beatbar.js"></script>
<script src="" type="text/JavaScript"></script>
<script type="text/JavaScript">
// Initialize SoundCloud API
// Get some tracks
// Initialize Beatbar with the returned array of track URLs
var tracks, beatbar;
client_id: "04dd99b58b8be275394ad3ca3dd660e4"
SC.get('/tracks', {
}, function(data){
tracks = $.map(data, function(track, i){
return track.stream_url + '?client_id=' + SC.options.client_id;
soundManager.onready(function() {
beatbar = new Beatbar();
var config = {
playlist : tracks
<!-- Google analytics tracking code -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3405077-23']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
<!-- facebook SDK-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); = id;
js.src = "//";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- twitter SDK -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src="//";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div class="container">
<div class='masthead'>
<img id='arrow' src='img/arrow.jpg' width='174' height='199' />
<div class="intro">
<a id='play-button' class="btn btn-large btn-success" href="#">Start playing</a>
<div class='social row'>
<div class='span1 offset5 fblike'>
<fb:like send="false" layout="button_count" width="200" show_faces="false"></fb:like>
<div class='span1 tweetbtton'>
<a href="" class="twitter-share-button" data-url="" data-text="Beatbar - a media player inside the browser address bar" data-via="jaipandya" data-related="jaipandya">Tweet</a>
<p>Media player inside the browser address bar</p>
<img src='img/screenshot.jpg' width='1140' height='294' />
<div class="description row">
<div class='span8 offset2'>
The big ‘O’ inside the address bar represents the current mouse position.
Move the mouse pointer on the document to left and right to move O in the corresponding directions.
When it is over controls, click the mouse button to take an action.<br />
<h2>Keyboard shortcuts</h2>
<table class="table table-bordered">
<td><span class="label">p / k</span></td>
<td><span class="label">n / j</span></td>
<td><span class="label">Space</span></td>
<td>Play / Pause</td>
<td><span class="label">Right</span></td>
<td>Seek forward by 5 seconds</td>
<td><span class="label">Left</span></td>
<td>Seek backward by 5 seconds</td>
<td><span class="label">Up / Down</span></td>
<td>Increase / Decrease volume</td>
<p class='faq'>
<strong>Q</strong>: How does it work?<br />
<strong>A</strong>: Beatbar uses <a href="">soundManager</a> awesomeness to play audio. Using HTML5 and Flash, SoundManager 2 provides reliable cross-platform audio under a single JavaScript API. The player streams audio from <a href="">SoundCloud</a> using their JS SDK.<br />
<p class='faq'>
<strong>Q</strong>: Why inside address bar?<br />
<strong>A</strong>: Because <a href="">@cameronmcefee</a> and <a href="">@probablycorey</a> had left this experiment for me. (Read <a href="">parallex URL</a> and <strong>URL hunter</strong>)<br />
<p class='faq'>
<strong>Q</strong>: Source code?<br />
<strong>A</strong>: Check out <a href="">annotated source code</a> or explore it on <a href="">github</a>.
<div class="footer">
<a href="">Jai Pandya</a> | <a href=''>Fork me on github</a>
Jump to Line
Something went wrong with that request. Please try again.