tirams/BradleyAudio.css

## BradleyAudio.css
/* globals */

html {
font:62.5%/1 "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
background: url('background.png');
background-repeat: no-repeat
}
body {
margin: 0 auto;
}
.audioitem {
margin-top: 20px;
margin-left: 5px;
}
.audioplayer {
display: block;
overflow: hidden;
width: 30px;
height: 30px;
position: relative;
margin-top: 2px;
}
.play,.pause {
background: #fff;
width: 20px;
height: 20px;
border-radius: 10px;
position: absolute;
margin: 5px;
display: block;
overflow: hidden;
text-indent: -1000px;
}
.play:after {
border-color:transparent transparent transparent #000;
border-style:solid;
border-width: 5px 5px 5px 10px;
width:0;
height:0;
position: absolute;
top: 5px;
left: 6px;
content: '';
}
.pause:after {
border-color: #000;
background: #fff;
border-style:solid;
border-width: 0 3px 0 3px;
width:2px;
height:10px;
position: absolute;
top: 5px;
left: 6px;
content: '';
}

.audioNotFound {
font-style: italic;
}

## BradleyAudio.html
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="BradleyAudio.css">
    </head>

    <body>

        <!-- Playlist -->

        <div class="audioItem">
                <span class="title">Talk Radio</span>
                <audio class="audio" src="052011.mp3"></audio>
                <div class="audioplayer">
                    <span class="playpause" title="Play/Pause">
                    	<a href="#" class="play">Play</a>
                	</span>
                </div>
        </div><!-- end audioItem -->

        <div class="audioItem">
                <span class="title">Comin' on Christmas</span>
                <audio class="audio" src="River.mp3"></audio>
                <div class="audioplayer">
                	<span class="playpause" title="Play/Pause">
                		<a href="#" class="play">Play</a>
            		</span>
        		</div>
        </div> <!-- end audioItem -->


        <div class="audioItem">
                <span class="title">Peace</span>
                <audio class="audio" src="anotherAudio.mp3"></audio>
                <div class="audioplayer">
                	<span class="playpause" title="Play/Pause">
                		<a href="#" class="play">Play</a>
            		</span>
        		</div>
        </div> <!-- end audioItem -->

        <!-- jquery lib -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <!-- html audio player -->
        <script type="text/javascript" src="BradleyAudio.js"></script>
    </body>
<html>

## BradleyAudio.js

// Plays audio files in html5 browsers with a canvas drawn controller
// expects audio elements with html markup like the following :
//  <div class="audioItem">
//                <span class="title">Song Title</span>
//                <audio class="audio" src="Audio.mp3"></audio>
//                <div class="audioplayer">
//					<span class="playpause" title="Play/Pause">
//                		<a href="#" class="play">Play</a>
//            		</span>
//        		</div>
//        </div>

$(function(){ // runs when when doc is ready

    // private statics
    var canvasWidth = canvasHeight = 30;
    var pauseHTML = '<a href="#" class="pause">Pause</a>';
    var playHTML =  '<a href="#" class="play">Play</a>';
    var errorAudioHTML = '<div class="audioNotFound">Not available</div>';
    // Create the player for each song
    $(".audioItem").each(function(index, elt){
        var elt$ = $(elt);//jQuery element from DOM

        var info = {};
        try {
            // get the html data
            info.audio = elt$.find(".audio")[0];
            info.playlink = elt$.find(".playpause")[0];
            info.audioplayer= elt$.find(".audioplayer")[0];
            info.audioItem = elt$;

            // make sure markup is ok
            if (info.audio === undefined ||
                info.playlink === undefined ||
                info.audioplayer === undefined ||
                info.audioItem === undefined)
                throw(new Error( elt.toString() +
                      " " + elt.outerHTML));

            //create the canvas element
            var radius = canvasWidth / 2;
            var canvas = document.createElement("canvas");
            canvas.setAttribute("width", canvasWidth);
            canvas.setAttribute("height", canvasHeight);
            canvas.setAttribute("class", "canvas");
            canvas.setAttribute("title", "restart");
            info.canvas = info.audioplayer.appendChild(canvas);
            elt$.data("info", info);
        }
        catch(e)
        {
            //error setting up audio info for elt
            if (window.console != undefined &&
                window.console.log != undefined){
                console.log("**Error in html can't setup audio:"+index);
                console.log(e.message);
                }

        }
    });

    //method to draw status of playback
    function updateUI(info)
     {
        if (info)
        {
            var currentAudio = info.audio;
            var f = currentAudio.currentTime;
            var g = currentAudio.duration;
            var b = info.canvas;

            //create a part of circle to represent the played amount as the arc
            var e = b.getContext("2d");
            var a = y = radius = canvasWidth / 2;
            var d = -Math.PI / 2;
            var c = d + ((f / g) * Math.PI * 2);
            b.getContext("2d").clearRect(0, 0, canvasWidth, canvasHeight);

            e.fillStyle = "#000";
            e.beginPath();
            e.moveTo(a, y);
            e.arc(a, y, radius, d, c, false);
            e.closePath();
            e.fill();
        }
    }

    // get the auto data for the specified dom element
    function getInfo(e){
        return $(e).parentsUntil("body", ".audioItem").data("info");
    }

    //method stop the play of all other audio elements except excl
    function pauseOthers(excl) {
        $(".audio").each(function(index, elt) {
                elt !== excl && elt.pause();
            });
    }

    //method to set the play link
    function updateLink(e, newContent) {
        var info = getInfo(e.target);
        if (info && info.playlink !== undefined){
            info.playlink.innerHTML = newContent;
        }
    }

    //----------
    //event handlers
    //----------
    $(".audio").bind("play",function(e){
        // clicking play turns to pause for the playing item
        updateLink(e, pauseHTML);
    });

    $(".audio").bind("pause ended",function(e){
        // clicking pause or when ended trurns on play back
        // on for the current item
        updateLink(e, playHTML);
    });

    $(".playpause").click(function(e){
        // get the audio element
        var info = getInfo(e.target);
        if (info){
            var currentAudio = info.audio;

            //if anything else already playing pause it
            pauseOthers(currentAudio);

            // if requested item is paused then play it
            if (currentAudio.paused){
                //makes sure we gave data
                if (currentAudio.networkState != 3)
                    currentAudio.play();
                else
                    ($(info.audioItem)).find('div.audioplayer')
                        .replaceWith(errorAudioHTML);
            }
            // if requested item reached the end loop to replay from start
            else if (currentAudio.ended){
                currentAudio.currentTime = 0;
                updateUI(info.audioItem);
                currentAudio.play();
            }
            else //otherwise its currently playing so pause it
            {
                currentAudio.pause();
            }
        }
    });

    // update the display for time updates
    $(".audio").bind("timeupdate", function(e){
            var info = getInfo(e.target);
            if (info){
                updateUI(info);
            }
        });

    //reset play needle to beginning
    $(".canvas").click(function(e){
        // get the audio element
        var info = getInfo(e.target);
        if (info){
            var currentAudio = info.audio;
            currentAudio.currentTime = 0;
            updateUI(info);
        }
    });

});

## note.txt
Issue he's having is noted here
http://stackoverflow.com/questions/8216584/trying-to-get-my-html-5-audio-player-to-play-more-than-one-file-on-the-same-page

//troubleshooting
He's trying to copy & paste the elements
the ids would no longer be unique if copied

//fix
rewrote to use jQuery and support classes for multiple audio elements

//recommendation
use better lib? for html5 browsers audio like
http://www.schillmania.com/projects/soundmanager2/
 or
http://jplayer.org/
	/* globals */

	html {
	font:62.5%/1 "Droid Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	background: url('background.png');
	background-repeat: no-repeat
	}
	body {
	margin: 0 auto;
	}
	.audioitem {
	margin-top: 20px;
	margin-left: 5px;
	}
	.audioplayer {
	display: block;
	overflow: hidden;
	width: 30px;
	height: 30px;
	position: relative;
	margin-top: 2px;
	}
	.play,.pause {
	background: #fff;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	position: absolute;
	margin: 5px;
	display: block;
	overflow: hidden;
	text-indent: -1000px;
	}
	.play:after {
	border-color:transparent transparent transparent #000;
	border-style:solid;
	border-width: 5px 5px 5px 10px;
	width:0;
	height:0;
	position: absolute;
	top: 5px;
	left: 6px;
	content: '';
	}
	.pause:after {
	border-color: #000;
	background: #fff;
	border-style:solid;
	border-width: 0 3px 0 3px;
	width:2px;
	height:10px;
	position: absolute;
	top: 5px;
	left: 6px;
	content: '';
	}

	.audioNotFound {
	font-style: italic;
	}
	<html>
	<head>
	<link rel="stylesheet" type="text/css" href="BradleyAudio.css">
	</head>

	<body>

	<!-- Playlist -->

	<div class="audioItem">
	<span class="title">Talk Radio</span>
	<audio class="audio" src="052011.mp3"></audio>
	<div class="audioplayer">
	<span class="playpause" title="Play/Pause">
	<a href="#" class="play">Play</a>
	</span>
	</div>
	</div><!-- end audioItem -->

	<div class="audioItem">
	<span class="title">Comin' on Christmas</span>
	<audio class="audio" src="River.mp3"></audio>
	<div class="audioplayer">
	<span class="playpause" title="Play/Pause">
	<a href="#" class="play">Play</a>
	</span>
	</div>
	</div> <!-- end audioItem -->


	<div class="audioItem">
	<span class="title">Peace</span>
	<audio class="audio" src="anotherAudio.mp3"></audio>
	<div class="audioplayer">
	<span class="playpause" title="Play/Pause">
	<a href="#" class="play">Play</a>
	</span>
	</div>
	</div> <!-- end audioItem -->

	<!-- jquery lib -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<!-- html audio player -->
	<script type="text/javascript" src="BradleyAudio.js"></script>
	</body>
	<html>

	// Plays audio files in html5 browsers with a canvas drawn controller
	// expects audio elements with html markup like the following :
	// <div class="audioItem">
	// <span class="title">Song Title</span>
	// <audio class="audio" src="Audio.mp3"></audio>
	// <div class="audioplayer">
	// <span class="playpause" title="Play/Pause">
	// <a href="#" class="play">Play</a>
	// </span>
	// </div>
	// </div>

	$(function(){ // runs when when doc is ready

	// private statics
	var canvasWidth = canvasHeight = 30;
	var pauseHTML = '<a href="#" class="pause">Pause</a>';
	var playHTML = '<a href="#" class="play">Play</a>';
	var errorAudioHTML = '<div class="audioNotFound">Not available</div>';
	// Create the player for each song
	$(".audioItem").each(function(index, elt){
	var elt$ = $(elt);//jQuery element from DOM

	var info = {};
	try {
	// get the html data
	info.audio = elt$.find(".audio")[0];
	info.playlink = elt$.find(".playpause")[0];
	info.audioplayer= elt$.find(".audioplayer")[0];
	info.audioItem = elt$;

	// make sure markup is ok
	if (info.audio === undefined \|\|
	info.playlink === undefined \|\|
	info.audioplayer === undefined \|\|
	info.audioItem === undefined)
	throw(new Error( elt.toString() +
	" " + elt.outerHTML));

	//create the canvas element
	var radius = canvasWidth / 2;
	var canvas = document.createElement("canvas");
	canvas.setAttribute("width", canvasWidth);
	canvas.setAttribute("height", canvasHeight);
	canvas.setAttribute("class", "canvas");
	canvas.setAttribute("title", "restart");
	info.canvas = info.audioplayer.appendChild(canvas);
	elt$.data("info", info);
	}
	catch(e)
	{
	//error setting up audio info for elt
	if (window.console != undefined &&
	window.console.log != undefined){
	console.log("**Error in html can't setup audio:"+index);
	console.log(e.message);
	}

	}
	});

	//method to draw status of playback
	function updateUI(info)
	{
	if (info)
	{
	var currentAudio = info.audio;
	var f = currentAudio.currentTime;
	var g = currentAudio.duration;
	var b = info.canvas;

	//create a part of circle to represent the played amount as the arc
	var e = b.getContext("2d");
	var a = y = radius = canvasWidth / 2;
	var d = -Math.PI / 2;
	var c = d + ((f / g) * Math.PI * 2);
	b.getContext("2d").clearRect(0, 0, canvasWidth, canvasHeight);

	e.fillStyle = "#000";
	e.beginPath();
	e.moveTo(a, y);
	e.arc(a, y, radius, d, c, false);
	e.closePath();
	e.fill();
	}
	}

	// get the auto data for the specified dom element
	function getInfo(e){
	return $(e).parentsUntil("body", ".audioItem").data("info");
	}

	//method stop the play of all other audio elements except excl
	function pauseOthers(excl) {
	$(".audio").each(function(index, elt) {
	elt !== excl && elt.pause();
	});
	}

	//method to set the play link
	function updateLink(e, newContent) {
	var info = getInfo(e.target);
	if (info && info.playlink !== undefined){
	info.playlink.innerHTML = newContent;
	}
	}

	//----------
	//event handlers
	//----------
	$(".audio").bind("play",function(e){
	// clicking play turns to pause for the playing item
	updateLink(e, pauseHTML);
	});

	$(".audio").bind("pause ended",function(e){
	// clicking pause or when ended trurns on play back
	// on for the current item
	updateLink(e, playHTML);
	});

	$(".playpause").click(function(e){
	// get the audio element
	var info = getInfo(e.target);
	if (info){
	var currentAudio = info.audio;

	//if anything else already playing pause it
	pauseOthers(currentAudio);

	// if requested item is paused then play it
	if (currentAudio.paused){
	//makes sure we gave data
	if (currentAudio.networkState != 3)
	currentAudio.play();
	else
	($(info.audioItem)).find('div.audioplayer')
	.replaceWith(errorAudioHTML);
	}
	// if requested item reached the end loop to replay from start
	else if (currentAudio.ended){
	currentAudio.currentTime = 0;
	updateUI(info.audioItem);
	currentAudio.play();
	}
	else //otherwise its currently playing so pause it
	{
	currentAudio.pause();
	}
	}
	});

	// update the display for time updates
	$(".audio").bind("timeupdate", function(e){
	var info = getInfo(e.target);
	if (info){
	updateUI(info);
	}
	});

	//reset play needle to beginning
	$(".canvas").click(function(e){
	// get the audio element
	var info = getInfo(e.target);
	if (info){
	var currentAudio = info.audio;
	currentAudio.currentTime = 0;
	updateUI(info);
	}
	});

	});
	Issue he's having is noted here
	http://stackoverflow.com/questions/8216584/trying-to-get-my-html-5-audio-player-to-play-more-than-one-file-on-the-same-page

	//troubleshooting
	He's trying to copy & paste the elements
	the ids would no longer be unique if copied

	//fix
	rewrote to use jQuery and support classes for multiple audio elements

	//recommendation
	use better lib? for html5 browsers audio like
	http://www.schillmania.com/projects/soundmanager2/
	or
	http://jplayer.org/