React.js Html5 audio tag

audio.css

.audio {
    position: relative;
}
.audio > canvas {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}
.audio-play {
    display: block;
    border: 1px solid #ddd;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #f7f7f7, inset 0 0 1px white;
    text-decoration: none;
    color: #494949;
}
.audio a:before {
    content: "\25B6";
}
.audio.playing a:before {
    content: "\25AE\25AE";
}
.audio-play:hover {
    color: #1b1b1b;
    background: #fbfbfb;
    text-decoration: none;
}
.audio-play:active {
    background: #f5f5f5;
    text-decoration: none;
}

audio.js

/**
 * All credits to: https://github.com/component/audio
 * Simple HTML5 <audio> tag
 * Used with base64 encoded string as source for audio
 * Usage: 
 *     var AudioTag = require('./pat_to_this_file');
 *     <AudioTag src={your_base64_string} />
 */

'use strict';
var React = require('react');

module.exports = React.createClass({

    getInitialState: function() {
        return {
            audio: new Audio(this.props.src),
            isPlaying: false
        };
    },

    componentDidMount: function() {
        this.state.audio.addEventListener('timeupdate', this.ontimeupdate);
    },

    ontimeupdate: function() {

        var el = this.state.audio;
        var number = el.currentTime / el.duration * 100;

        this.update(number);

        if (number === 100) {
            return this.setState({
                isPlaying: false
            });
        }
    },

    toggle: function(event) {
        event.preventDefault();
        var state = this.state.audio;
        var isPlaying = this.state.isPlaying;

        this.setState({
            isPlaying: !isPlaying
        });

        if (isPlaying) {
            return state.pause();
        }
        return state.play();
    },

    update: function(progress) {
        var context = this.refs.manager.getDOMNode().getContext('2d');

        var percent = Math.min(progress, 100);
        var ratio = window.devicePixelRatio || 1;

        var size = this.refs.manager.getDOMNode().width / ratio;
        var half = size / 2;
        var x = half;
        var y = half;
        var rad = half - 1;

        var angle = Math.PI * 2 * (percent / 100);
        context.clearRect(0, 0, size, size);

        context.strokeStyle = '#00bbff';
        context.beginPath();
        context.arc(x, y, rad, 0, angle, false);
        context.stroke();
    },

    render: function() {
        var className = this.state.isPlaying ? 'audio playing' : 'audio paused';

        return React.DOM.div({
            className: className
        }, [
            React.DOM.a({
                href: '#',
                onClick: this.toggle,
                className: 'audio-play'
            }),
            React.DOM.canvas({
                width: 57,
                height: 57,
                ref: 'manager',
                size: 53
            })
        ]);
    }
});

audio.png

As I mentioned in source code comments, All credits to: https://github.com/component/audio

I'll like to hear about any improvements or suggestions.