HTML5 mini audio player

HTML5 mini audio player

HTML

<p>Wait, buffering MP3's take a bit of time</p>

<canvas id="progress" width="40" height="40"></canvas> 

<a id="play-button" href="#">Play</a>

<!-- no other way than to make the evens inline -->
<!-- ogg: http://www.metadecks.org/software/sweep/audio/demos/organ1.ogg -->
<audio id="player" src="http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3" onTimeUpdate="update()" onEnded="trackEnded()"></audio>

CSS

#progress {
    display: block;
}

JavaScript

var trackEnded;
var update;

var Player = new Class({

    Implements: [Options, Events],

    options: {
        canvasStyles: {}
    },

    initialize: function(options) {
        this.setOptions(options);
        this.progress = {};

        this.progress.base = document.id('progress');
        this.playButton = document.id('play-button');
        this.audioPlayer = document.id('player');
        this.audio_duration = this.audioPlayer.duration;
        this.progress.ctx = this.progress.base.getContext('2d');
        this.progress.imd = null;
        this.progress.circ = Math.PI * 2;
        this.progress.quart = Math.PI / 2;
        this.progress.ctx.beginPath();
        this.progress.ctx.strokeStyle = '#BF593D';
        this.progress.ctx.lineCap = 'square';
        this.progress.ctx.shadowOffsetX = 0;
        this.progress.ctx.closePath();
        this.progress.ctx.fill();
        this.progress.ctx.lineWidth = 5.0;
        this.progress.imd = this.progress.ctx.getImageData(0, 0, 40, 40);

        //temp testing
        //var canItPlay = document.createElement('audio').canPlayType('audio/mpeg');
        //if (canItPlay != 'maybe') {
        //    console.log('No MP3 support...');
        //    return false; 
        //}

        update = this.onProgressUpdate.bind(this);
        trackEnded = this.onTrackEnd.bind(this);

        this.playButton.addEvents({
            click: function(event) {
                event.stop();
                this.play(this.playButton);
                this.playButton.set('text', 'Loading ...');
            }.bind(this)
        });
   },

    play: function(element) {
        if (this.audioPlayer.paused) {
            this.audioPlayer.play();
            newdisplay = 'Pause';
        } else {
            this.audioPlayer.pause();
            newdisplay = 'Play';
        }
        element.set('text', newdisplay);
    },

    draw: function(current) {
        this.progress.ctx.putImageData(this.progress.imd, 0, 0);
       ...