At the very least, it would be nice if space triggered play/pause.

A more advanced feature could be arrow keys for volume and seek (which we don't have), but those are hard to get right, and not very much a priority.

Also, to avoid tampering with existing keybindings , the player should be assigned a tabindex, so that the keybindings are assigned to the player only, not the whole page.

This is just a general bug listing a few things I'd like for usability.

Merge in changes from ofmlabs demos

Merge in the changes for ofmlabs demos. We want something along the lines of DGStreamPlayer and DGFilePlayer, but with better names.

Also, add http://labs.official.fm/codecs/js/auroraplayer.js to the repo. Please. PLEASE.

Fill player instances with javascript

Start with:

<div class="player" data-src="/foo/bar.mp3"></div>

Add everything so we end up getting:

<div class="player" tabindex="0" data-src="/foo/bar.mp3">
  <div class="avatar">
    <img src="/dgplayer/resources/fallback_album_art.png">
  </div>

  <span class="title"></span>
  <span class="artist"></span>

  <div class="button"></div>

  <div class="volume">
    <img src="/dgplayer/resources/volume_high.png">
    <div class="track">
      <div class="progress"></div>
      <div class="handle"></div>
    </div>
    <img src="/dgplayer/resources/volume_low.png">
  </div>

  <div class="seek">
    <span>0:00</span>
    <div class="track">
      <div class="loaded"></div>
      <div class="progress"></div>
    </div>
    <span>-0:00</span>
  </div>

  <div class="file_button"></div>
  <span class="file_description">Choose a file on your computer</span>
</div>

And then call whatever is necessary to make that player play /foo/bar.mp3.

Add this to something inside dgplayer

// Chrome doesn't support changing the sample rate, and uses whatever the hardware supports.
// We cheat here.  Instead of resampling on the fly, we're currently just loading two different
// files based on common hardware sample rates.
var _sampleRate = (function() {
    var AudioContext = (window.AudioContext || window.webkitAudioContext);
    if (!AudioContext)
        return 44100;

    return new AudioContext().sampleRate;
}());

And here's a slightly-modified version of a function used for the ofmlabs demos:

function addDGPlayer(DGPlayer) {
    if (unsupported) return;

    DGPlayer.volume = 100;

    var player, onplay;
    var url = '/media/planets@' + _sampleRate + '.mp3';

    DGPlayer.on('play', onplay = function(){
        if (player)
            player.disconnect();

        player = new DGAuroraPlayer(Player.fromURL(url), DGPlayer);
        DGPlayer.off('play', onplay);
    });

    DGPlayer.on('file', function(file) {        
        if (file) {
            if (player)
                player.disconnect();

            player = new DGAuroraPlayer(Player.fromFile(file), DGPlayer);
            DGPlayer.off('play', onplay);
        }
    });

}

Some miscellaneous wrappers

DGPlayer.fillPlayer(document.getElementById('dgplayer'), [url]);

// Possibly this, too, if we can (sanely) detect the difference:
DGPlayer.fillPlayer('#player', [url]) // Mmmm, querySelector() magic. Tastes like chicken.


/* Sortof like:
 *    document.querySelectorAll('.player').foreach(function(p){ DGPlayer.fillPlayer(p);}
 * but without .foreach, because .querySelectorAll doen't return an actual Array :(
 */
DGPlayer.fillPlayers();

Can we get at least FF3.6 working? I know it's old but one of our testers haz it!

The radial blur looks weird when you hold down the play/pause button.

An alternative would be an additional accessor to the innerHTML of the counter, such as currentTime.

The counter should be stopped and grayed out before the stream starts and after it ends. The play button, too. When a stream ends, show a link icon if the stream was uploaded to official.fm.

Edited to take into account the start of a stream.

Currently the player is a singleton, and I would much prefer a class. Essentially the same thing, but just so that you could call it yourself, on a designated element, for example var player = DGPlayer(document.querySelector('.player'));.

This would make it possible to have multiple players and also make it not mandatory to have the player DOM inserted when the script is loaded.

What do you think?

Where, how method to get a event - "file is end"???
I wont simply play new file after current is end.

Less requests, and less load in general.

Also, fixes the preloading issue caused by the fact that the image paths are hardcoded and don't refer to the right place, unless the page is running in the script's working directory (which also means unnecessary 404 requests).

Is there a tool for this, to save the trouble from manually doing it, maintaining sprites is chaos?