you have to test things. programming is empirical.

there is one scenario where this breaks, and it's because i just let the user push the counter in any direction they want, for as long as they want. it really didn't matter, before, it was just a counter going up and down. but, now i have a listener on the play error, so pushing the counter out of bounds breaks the player.

specifically, if i let the player push forward or backward past the bounds of the playlist, it generates the same error that i'd get if i didn't have the right array. this was creating a lot of confusion.

so, now the button doesn't work when you get past the bounds, it just stops, leaving the error for the situation where i don't have the right array.

clearly, this would suggest that any other situation that generates a play error is going to wreak similar havoc. the thing is that i can't think of any other situation that would do that. the assumption is that the html file is in the same directory as the mp3 files; if they aren't there, you'd get an error, but you're not getting very far without them, anyways. i'm not done testing yet, let's see if i can find something else.

i also dropped the boolean around the script as a troubleshooting step and didn't put it back. it can just pause on massive error. you'll have to refresh to restore functionality, but that should only happen when the files aren't there, anyways.

for now, here's the new and hopefully final script:

<p align="center">

//the display box
<input disabled type = "text"  style="width:300px;background-color:#000000;border-width:0px;" id = "txtOutput"/>
<br>

//the onclick now calls a function. i need a conditional. it was getting messy.
<button type="button"  style="font-size:50px;" onclick="backClick()">&lt;</button>

//the html5 audio control is the same/
<audio autoplay controls  style="width:500px;height:50px"  id="Player">
   <source id=flac src="path to first flac file" type='audio/flac; codecs="flac"'>
   <source id=mp3 src="path to first mp3 file" type='audio/mpeg; codecs="mp3"'>
   <source id=aac   src="path to first m4a file" type='audio/mp4'>
   <source id=wav src="path to first wav file" type='audio/wav'>
   <source id=ogg src="path to first ogg file" type='audio/ogg; codecs="vorbis"'>
</audio>

//there's now a function here, too
<button type="button"  style="font-size:50px;" onclick="forwardClick()">&gt;</button>

//this is the two row table
<table>
<tr><td width=200 onclick="Player.src = nextsrc[0]; Player.play(); elm=0; txtOutput.value = this.innerHTML">track 1 </td><td onclick="Player.src = nextsrc[8]; Player.play(); elm=8; txtOutput.value = this.innerHTML">track 9</td></tr>
.
.
.
</table>


<script>
var elm = 0;  //counter
var Player = document.getElementById('Player');  //player

var titles =[array of song titles];

txtOutput.value = titles[0]; //autoload track 1

var nextsrc = ["array of paths to mp3 files"];  //default


Player.onerror=function(){   //if the file can't play
     nextsrc = ["array of paths to flac files"]; //try flac
     Player.src=nextsrc[elm];  //set current path
     Player.play();  /play
     Player.onerror=function(){    //if the player throws another error  
          nextsrc = ["array of paths to ogg files"]; /try oggs
          Player.src=nextsrc[elm]; 
          Player.play();
          Player.onerror=function(){
               nextsrc = ["array of paths to m4a files"];  //try mp4
               Player.src=nextsrc[elm];
               Player.play();
               Player.onerror=function(){
                    nextsrc = ["array of paths to wav files"]; //try wav
                    Player.src=nextsrc[elm];
                    Player.play();
                    Player.onerror=function(){Player.pause();}  //give up
                    } 
              }
          }
     }

function backClick(){  //here's the onclick script moved to a function
    if(elm>=1){   //the index has to be in bounds.
        Player.src = nextsrc[--elm];
        Player.play();
        txtOutput.value = titles[elm];
    }
    else{
    elm=0;  //or set it to 0
    }
}

function forwardClick(){    //here's the other button script
    if(elm<=(nextsrc.length-2)){ //the index must be in bounds
        Player.src = nextsrc[++elm];
        Player.play();
        txtOutput.value = titles[elm];
    }
    else{
    elm=nextsrc.length-1;  //or set to the end
    }}


Player.onended = function(){    //autoplay
    if(++elm < nextsrc.length){  
         Player.src = nextsrc[elm]; Player.play();
         txtOutput.value = titles[elm];   
         }
}
</script>
</p>