Help with html5 audio player

I have done everything i can think of and cant figure out how to fix this dreamweaver cs6 says the error is on line 45. The source code is at the bottom check it out any help would be great. =) Thanks in advance.

$(document).ready(function(){
var check=0;
var i;
for(i=0;i<20;i++){
if($(".a"+i+"").attr("id")){
check=$(".a"+i+"").attr("id").slice(1,2);
}
}

var selected=check*($("#b0").outerWidth());
var position;

$("#sprite").css({backgroundPosition:''+selected+'px 4px'});

$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseover(function(){
position=$(this).attr("id").slice(1,2)*($("#b0").outerWidth())/*width of your list item*/;
$("#sprite").stop().animate({backgroundPosition:''+position+'px 4px'},{duration:300});
});

$("#b0,#b1,#b2,#b3,#b4,#b5,#b6,#b7").css({backgroundPosition:'0px 0px'}).mouseout(function(){
$("#sprite").stop().animate({backgroundPosition:''+selected+'px 4px'},{duration:300});
});
});


<style>

audio#aap-audio,
object#aap-flashPlayer {
height: 1px;
}
#aap-player {
font-family: Arial, Helvetica, sans-serif;
background-color: #000000; /* background color of player (appears on top & bottom) */
border: 1px solid #000000; /* border around entire player */
width: 467px;
border-radius: 15px;
-moz-border-radius: 15px;
}

#aap-controller {
position: relative;
border-top: 2px solid #4c4c4c;
border-bottom: 2px solid #4c4c4c;
background-color: #3D3D3D; /* background color of controller bar */
width: 467px;
height: 34px; /* height of button img (30px) + 2px top + 2px bottom borders */
line-height: 30px;
}

audio#aap-audio {
border: 2px solid #FFFFFF; /* masked against background until audio has focus */
}

#aap-controller input {
border: 2px solid #3D3D3D; /* masked against background until input has focus*/
position: absolute;
}

audio#aap-audio:focus,
audio#aap-audio:active,
audio#aap-audio:hover,
#aap-controller input:focus,
#aap-controller input:hover,
#aap-controller input:active {
border-color: #ffff00 !important; /* color of border when a control receives focus */
}

#aap-controller input#aap-playpause {
width: 34px;
height: 30px;
top: 0px;
left: 0px;
}

#aap-controller #aap-seekBar {
height: 26px;
background-color: transparent;
top: 0px;
left: 40px;
width: 200px;
}

#aap-controller input#aap-seekBack {
width: 34px;
height: 30px;
top: 0px;
left: 40px;
}

#aap-controller input#aap-seekForward {
width: 34px;
height: 30px;
top: 0px;
left: 80px;
}

#aap-controller span#aap-timer {
/* contains both span#elapsedTime and span#duration */
position: absolute;
color: #ffffff;
width: 100px;
left: 250px;
}

#aap-controller input#aap-mute {
width: 34px;
height: 30px;
top: 0px;
left: 360px;
border-left-color: #848484;
}

#aap-controller input#aap-volumeControl {
/* not used, but here for future reference */
display: none;
height: 100px;
width: 30px;
background-color: #666666;
border: 2px solid #4c4c4c;
color: #ffffff;
left: 360px;
top: -105px;
}

#aap-controller input#aap-volumeUp {
width: 34px;
height: 30px;
top: 0px;
left: 395px;
}

#aap-controller input#aap-volumeDown {
width: 34px;
height: 30px;
top: 0px;
left: 430px;
}

#aap-playlist {
font-size: 0.9em;
list-style-type: none;
margin: 0;
background-color: #FFFFFF;
padding: 5px 0;
}

#aap-playlist li {
background-color: #DDDDDD; /* background color of each item in playlist */
margin: 5px;
padding: 5px;
border-radius: 15px;
-moz-border-radius: 15px;
}

#aap-playlist li.focus {
background-color: #FFEEB3; /* background color of playlist item that is currently playing */
font-weight: bold;
}
#aap-playlist li.focus a:after {
content: ' *';
}
#aap-playlist a {
width: 100%;
color: #333;
text-decoration: none;
margin: 0;
padding: 5px;
}

#aap-playlist a:hover,
#aap-playlist a:focus,
#aap-playlist a:active {
width: 100%;
color: #000000; /* text color of playlist items when they have focus */
text-decoration: none;
font-weight: bold;
background-color: transparent;
}

#aap-now-playing {
text-align: center;
font-weight: bold;
font-size: 1.1em;
color: #FFFFFF;
background-color: transparent;
padding: 0.5em 0.5em 1em;
}

#aap-now-playing span {
font-size: 0.9em;
}

#aap-player span#aap-status {
float: right;
height: 30px;
color: #FFFFFF;
font-style: italic;
background-color: transparent;
top: 0px;
padding-right: 5px;
}

#aap-player #aap-status-bar {
background-color: transparent;
color: #FFFFFF;
font-size: 0.9em;
font-style: italic;
text-align: right;
padding: 0.5em 1em;
}

.aap-offscreen {
position:absolute;
left:-10000px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}
#aap-error {
display: block;
background: #ffc;
border: 2px solid #000;
color: #FF0000;
margin: 0.75em;
padding: 0.5em;
}
#aap-debug {
/* only displayed if useDebug is true (will appear dynamically) */
/* A completely separate div, not part of the player */
/* Stylize as you see fit */
display: none;
float: left;
width: 20em;
border-left: 1px solid black;
margin: 0;
padding: 0 0.75em;
}
#aap-debug-heading {
font-size: 1.4em;
margin-top: 0;
margin-bottom: 0;
}
.disabled {
opacity: 0.5;
filter:alpha(opacity=50); /* for IE */
}

</style>


<link rel="stylesheet" href="aap.css" type="text/css"/>



<script>
var volume = 0.5; //0 to 1, not too loud by default or you'll drown out screen readers
var autoadvance = true; // automatically play next track when current one ends
var YMPParams =
{
volume:volume,
autoadvance:autoadvance,
displaystate:3, // hide default Yahoo player - we want to use our own
autoplay:false, // start playing automatically (also adds autoplay attrib to <audio>)
parse:false //will parse mp3 links later if browser doesn't support HTML5 audio
}
</script>


<script src="http://webplayer.yahooapis.com/legacy/player.js"></script>


<script src="aap.js"></script>


<script>
if (window.addEventListener) {
window.addEventListener('load', function () {
accessibleAudioPlayer.init();
}, false);
}
else if (window.attachEvent) {
window.attachEvent('onload', function () {
accessibleAudioPlayer.init();
});
}
else {
document.addEventListener('load', function () {
accessibleAudioPlayer.init();
}, false);
}
</script>

</head>

<body>

<div role="banner"></div>
<div id="content">
<div id="main" role="main">



<div id="wrapper">
<div id="aap-audio-container">
<audio id="aap-audio" preload="auto" tabindex="0">
<source type="audio/ogg" src="http://www.terrillthompson.com/music/audio/everyday.ogg"/>
<source type="audio/mpeg" src="http://www.terrillthompson.com/music/audio/everyday.mp3"/>
</audio>
</div>
<div id="aap-player" role="region" aria-label="Audio player">
<div id="aap-now-playing" role="alert"></div>
<div id="aap-controller"></div>
<ul id="aap-playlist">




<li><a href="http://www.terrillthompson.com/music/audio/everyday.mp3"
data-format="mp3 ogg">Every Day</a></li>
<li><a href="http://www.terrillthompson.com/music/audio/paulallen.mp3"
data-format="mp3 ogg">The Paul Allen Song</a></li>
<li><a href="http://www.terrillthompson.com/music/audio/php70alpha.mp3"
data-format="mp3 ogg">PHP 7.0 Alpha</a></li>
<li><a href="http://www.terrillthompson.com/music/audio/curlyjoe.mp3"
data-format="mp3 ogg">Curly Joe</a></li>
<li><a href="http://www.terrillthompson.com/music/audio/frenchsong.mp3"
data-format="mp3 ogg" lang="fr">Une Chanson FranÃ§aise</a></li>
<li><a href="http://www.terrillthompson.com/music/audio/smallf.mp3"
data-format="mp3 ogg">Man With Small F (The Inaccessible PDF Song)</a></li>
</ul>
<div id="aap-status-bar" role="alert"></div>
</div>
</div>
<div id="aap-debug"></div>

Log in or Sign up

Help with html5 audio player

bigj43454 Greenhorn

Log in or Sign up

Help with html5 audio player

bigj43454 Greenhorn

Useful Searches