got sound working using <audio /> and ogg

functions.js

@@ -3,15 +3,17 @@ function playNote(id) //id format: distortion_atari note index
 	activeKeyID = id;
 	var dist = activeKeyID.substring(0,activeKeyID.indexOf("_"));
 	var atariIndex = activeKeyID.substring(activeKeyID.indexOf("_")+1);
-	
+
 	if (atariIndex != "nil")
 	{
 		if (dist == "square")		dist = 0;
 		else if (dist == "lead")	dist = 1;
 		else if (dist == "saw")		dist = 2;
 		else if (dist == "bass")	dist = 3;
-		
+
-		document.getElementById('sound').src = "midi/"+noteArray[dist][atariIndex][0];
+		const audio = document.getElementById('sound');
+		audio.src = "midi/"+noteArray[dist][atariIndex][0];
+		audio.play();
 		writeNoteData(dist,atariIndex);
 	}
 }
@@ -21,15 +23,15 @@ function writeNoteData(dist,atariIndex)
 	var nv = noteValue;
 	if (dotted)
 	{
-		nv = 2*noteValue/3;				
+		nv = 2*noteValue/3;
 		nv = nv.toString().substring(0,nv.toString().indexOf(".")+3);
 	}
-	
+
 	if (channel == 1)
 		document.createMidiForm.c1_display.value += noteArray[dist][atariIndex][1]+" "+dist+" "+atariIndex+" "+nv+"\n";
 	else if (channel == 2)
 		document.createMidiForm.c2_display.value += noteArray[dist][atariIndex][1]+" "+dist+" "+atariIndex+" "+nv+"\n";
-		
+
 	updateBufferArray();
 }
 
@@ -37,14 +39,14 @@ function writeRestData(restVal)
 {
 	if (dotted)
 	{
-		restVal = 2*restVal/3;				
+		restVal = 2*restVal/3;
 		restVal = restVal.toString().substring(0,restVal.toString().indexOf(".")+3);
 	}
 	if (channel == 1)
 		document.createMidiForm.c1_display.value += "x x x "+restVal+"\n";
 	else if (channel == 2)
 		document.createMidiForm.c2_display.value += "x x x "+restVal+"\n";
-		
+
 	updateBufferArray();
 }
 
@@ -55,7 +57,7 @@ function disableNils()
 	{
 		if (x[i].id.match(/nil/))
 		{
-			x[i].disabled = "disabled";	
+			x[i].disabled = "disabled";
 			x[i].style.backgroundColor = "#CCCCCC";
 			x[i].style.cursor = "default";
 		}
@@ -68,11 +70,11 @@ function selectNote(val)
 	for (i = 0; i < x.length; i++)
 	{
 		if (Math.pow(2,i) == val)
-		{				
+		{
 			x[i].disabled = "disabled";
 			x[i].style.cursor = "default";
 		}
-		else					
+		else
 		{
 			x[i].disabled = "";
 			x[i].style.cursor = "pointer";
@@ -84,7 +86,7 @@ function selectNote(val)
 function validateForm()
 {
 	var x = document.createMidiForm;
-	
+
 	if (isNaN(Number(x.tempo.value)) || isNaN(parseInt(x.tempo.value)) || x.tempo.value == "0")
 	{
 		x.tempo.value = "";
@@ -99,25 +101,25 @@ function validateForm()
 	}
 }
 
-function toggleColor()			
+function toggleColor()
 {
 	showColor = !showColor;
 	var x = document.getElementsByName('key');
-	
+
 	if (showColor)
 	{
 		for (i = 0; i < x.length; i++)
 		{
 			var dist = x[i].id.substring(0,x[i].id.indexOf("_"));
 			var atariIndex = x[i].id.substring(x[i].id.indexOf("_")+1);
-		
+
 			if (atariIndex != "nil")
 			{
 				if (dist == "square")		dist = 0;
 				else if (dist == "lead")	dist = 1;
 				else if (dist == "saw")		dist = 2;
 				else if (dist == "bass")	dist = 3;
-				
+
 				x[i].style.backgroundColor = noteArray[dist][atariIndex][8];
 			}
 		}
@@ -128,14 +130,14 @@ function toggleColor()
 		{
 			var dist = x[i].id.substring(0,x[i].id.indexOf("_"));
 			var atariIndex = x[i].id.substring(x[i].id.indexOf("_")+1);
-		
+
 			if (atariIndex != "nil")
 			{
 				if (dist == "square")		dist = 0;
 				else if (dist == "lead")	dist = 1;
 				else if (dist == "saw")		dist = 2;
 				else if (dist == "bass")	dist = 3;
-				
+
 				if (x[i].className.match("wkey"))	x[i].style.backgroundColor = "#FFFFFF";
 				else											x[i].style.backgroundColor = "#000000";
 			}
@@ -152,29 +154,29 @@ function showFloatingDiv(keyID,e)
 	else if (mouseX < 5)					mouseX = 5;
 	var dist = activeKeyID.substring(0,activeKeyID.indexOf("_"));
 	var atariIndex = activeKeyID.substring(activeKeyID.indexOf("_")+1);
-	
+
 	if (dist == "square")		dist = 0;
 	else if (dist == "lead")	dist = 1;
 	else if (dist == "saw")		dist = 2;
 	else if (dist == "bass")	dist = 3;
-	
+
 	var x = document.getElementById('floatDiv');
 	x.style.top = mouseY+"px";
-	x.style.left = mouseX+"px";			
+	x.style.left = mouseX+"px";
 	x.style.visibility = "visible";
 	x.innerHTML = "<a style='float: right; border: 1px dotted #000000; padding: 1px;' href='javascript:void(0)' onclick='hideFloatingDiv()' title='close'><b>X</b></a>";
 	x.innerHTML += "<b>"+noteArray[dist][atariIndex][1]+"</b><br />Pitch: <code>"+atariIndex+"</code><br />";
-	x.innerHTML += "Freq: <code>"+noteArray[dist][atariIndex][3]+" Hz</code><br />";			
+	x.innerHTML += "Freq: <code>"+noteArray[dist][atariIndex][3]+" Hz</code><br />";
 	if (noteArray[dist][atariIndex][4] > 0)
 		x.innerHTML += "Error: <code>+"+noteArray[dist][atariIndex][4]+"</code>";
 	else
 		x.innerHTML += "Error: <code>"+noteArray[dist][atariIndex][4]+"</code>";
-	
+
 	for (i = 0; i < 32; i++)
 	{
 		if (i != atariIndex)
-			if (noteArray[dist][atariIndex][1] == noteArray[dist][i][1]) //two pitches with same note name	
+			if (noteArray[dist][atariIndex][1] == noteArray[dist][i][1]) //two pitches with same note name
-			{					
+			{
 				x.innerHTML += "<br /><a href='javascript:exchange()'>Exchange</a>";
 				break;
 			}
@@ -185,12 +187,12 @@ function exchange()
 {
 	var dist = activeKeyID.substring(0,activeKeyID.indexOf("_"));
 	var atariIndex = activeKeyID.substring(activeKeyID.indexOf("_")+1);
-	
+
 	if (dist == "square")		dist = 0;
 	else if (dist == "lead")	dist = 1;
 	else if (dist == "saw")		dist = 2;
 	else if (dist == "bass")	dist = 3;
-	
+
 	for (j = 0; j < 32; j++)
 		if (j != atariIndex && noteArray[dist][atariIndex][1] == noteArray[dist][j][1])
 		{
@@ -199,7 +201,7 @@ function exchange()
 			atariIndex = j;
 			break;
 		}
-		
+
 	//update floating div
 	var x = document.getElementById('floatDiv');
 	x.style.top = mouseY+"px";
@@ -213,7 +215,7 @@ function exchange()
 	else
 		x.innerHTML += "Error: <code>"+noteArray[dist][atariIndex][4];
 	x.innerHTML += "</code><br /><a href='javascript:exchange()'>Exchange</a>";
-	
+
 	//change color, if necessary
 	if (showColor)
 	{
@@ -248,8 +250,8 @@ function undoLastKeypress()
 	}
 }
 
-function hideFAQ()				{document.getElementById('faq').style.visibility = "hidden";}		
+function hideFAQ()				{document.getElementById('faq').style.visibility = "hidden";}
-function clearChannelData(x)	{document.getElementById("c"+x.toString()+"_display").value = "";}		
+function clearChannelData(x)	{document.getElementById("c"+x.toString()+"_display").value = "";}
 function setDotted()				{dotted = !dotted;}
 function toggleChannel(c)		{channel = c;}
 function hideFloatingDiv()		{document.getElementById('floatDiv').style.visibility = "hidden";}

index.php

@@ -71,11 +71,11 @@
 	while (($file = readdir($dir)) != null)
 	{
 		//format: distortion_atari note index_note name_octave_freq_error_MIDI note index_pitch bend left bits_pitch bend right bits
-		if (strpos($file,".mid"))
+		if (strpos($file,".ogg"))
 		{
 			$info = explode("_",$file);
 			$info[2] = str_replace("+","#",$info[2]);
-			$info[count($info)-1] = substr($info[count($info)-1],0,strpos($info[count($info)-1],".mid"));
+			$info[count($info)-1] = substr($info[count($info)-1],0,strpos($info[count($info)-1],".ogg"));
 
 			if (!isset($note_array[$info[0]][$info[1]]))
 				$note_array[$info[0]][$info[1]] = array();
@@ -89,17 +89,18 @@
 			$green = str_pad(dechex(150),2,"0",STR_PAD_LEFT);
 			$blue = str_pad(dechex(100-2*$note_array[$info[0]][$info[1]][4]),2,"0",STR_PAD_LEFT);
 			$color = $red.$green.$blue;
-			$note_array[$info[0]][$info[1]][8] = $color;
+			$note_array[$info[0]][$info[1]][8] = '#' . $color;
 		}
 	}
 
 	require ("createmidi.php");
 ?>
+<!doctype html>
 <html>
   <head>
     <title>Atari 2600 Music Utility</title>
     <meta name='description' content='Enables easier composing of Atari 2600 music.' />
-    <meta name='keywords' content='atari, 2600, music, composing, tmont, tommy, montgomery, midi' />
+    <meta name='keywords' content='atari, 2600, music, composing, midi' />
     <link rel='stylesheet' type='text/css' href='style.css' />
 	 <script type='text/javascript'>
 		var noteValue = 4;
@@ -240,13 +241,11 @@
 		  echo "\n\t<div align='center' width='".($xstart+$wwidth*$numoctaves*7)."px'>\n";
 
 		echo "\n\t<span style='text-align: left; position: absolute; left: $xstart"."px; top:".(4*($wheight+$ystart))."px'>";
-		echo "\n\t\t<label title='[c]'><input type='checkbox' accesskey='c' onclick='toggleColor()' />Color Me Blind</label>";
+		echo "\n\t\t<label title='[c]'><input type='checkbox' accesskey='c' onclick='toggleColor()' autocomplete='off' />Color Me Blind</label>";
 		echo "\n\t</span>";
 		echo "\n\t<span style='text-align: left; position: absolute; left: ".(-35+$xstart+$numoctaves*7*$wwidth)."px; top:".(4*($wheight+$ystart))."px'>";
 		echo "\n\t\t<a title='[q]' accesskey='q' onfocus='showFAQ()' href='javascript:void(0)'>FAQ</a>";
 		echo "\n\t</span>";
-
-		//echo "\n\t<span style='position: absolute; top: ".(22+4*($wheight+$ystart))."px; left: 660px;' title='dot [w]' ><input type='checkbox' accesskey='w' onclick='setDotted()'>Dotted</input></span>";
 	?>
 		<br /><br /><br /><br /><br /><br /><br />
 		<br /><br /><br /><br /><br /><br /><br />
@@ -257,23 +256,23 @@
 			<tr><td colspan='2'>
 				<table align='center'>
 					<tr>
-						<td><button accesskey='1' name='note-select' title='whole note [1]' class='note-select' onclick='selectNote(1)'><img src='img/1.gif'></img></button></td>
+						<td><button accesskey='1' name='note-select' title='whole note [1]' class='note-select' onclick='selectNote(1)'><img src='img/1.gif' /></button></td>
-						<td><button accesskey='2' name='note-select' title='half note [2]' class='note-select' onclick='selectNote(2)'><img src='img/2.gif'></img></button></td>
+						<td><button accesskey='2' name='note-select' title='half note [2]' class='note-select' onclick='selectNote(2)'><img src='img/2.gif' /></button></td>
-						<td><button accesskey='3' name='note-select' title='quarter note [3]' class='note-select' onclick='selectNote(4)' disabled='disabled' style='cursor: default;'><img src='img/4.gif'></img></button></td>
+						<td><button accesskey='3' name='note-select' title='quarter note [3]' class='note-select' onclick='selectNote(4)' disabled='disabled' style='cursor: default;'><img src='img/4.gif' /></button></td>
-						<td><button accesskey='4' name='note-select' title='8th note [4]' class='note-select' onclick='selectNote(8)'><img src='img/8.gif'></img></button></td>
+						<td><button accesskey='4' name='note-select' title='8th note [4]' class='note-select' onclick='selectNote(8)'><img src='img/8.gif' /></button></td>
-						<td><button accesskey='5' name='note-select' title='16th note [5]' class='note-select' onclick='selectNote(16)'><img src='img/16.gif'></img></button></td>
+						<td><button accesskey='5' name='note-select' title='16th note [5]' class='note-select' onclick='selectNote(16)'><img src='img/16.gif' /></button></td>
-						<td><button accesskey='6' name='note-select' title='32nd note [6]' class='note-select' onclick='selectNote(32)'><img src='img/32.gif'></img></button></td>
+						<td><button accesskey='6' name='note-select' title='32nd note [6]' class='note-select' onclick='selectNote(32)'><img src='img/32.gif' /></button></td>
-						<td><button accesskey='7' name='note-select' title='64th note [7]' class='note-select' onclick='selectNote(64)'><img src='img/64.gif'></img></button></td>
+						<td><button accesskey='7' name='note-select' title='64th note [7]' class='note-select' onclick='selectNote(64)'><img src='img/64.gif' /></button></td>
-						<td><span title='dot [w]'><input type='checkbox' accesskey='w' onclick='setDotted()'>Dotted</input></span></td>
+						<td><label title='dot [w]'><input type='checkbox' accesskey='w' onclick='setDotted()' />Dotted</label></td>
 					</tr>
 					<tr>
-						<td align='center'><button name='note-select' title='whole rest' class='rest-select' onclick='writeRestData(1)'><img src='img/r1.gif'></img></button></td>
+						<td align='center'><button name='note-select' title='whole rest' class='rest-select' onclick='writeRestData(1)'><img src='img/r1.gif' /></button></td>
-						<td align='center'><button name='note-select' title='half rest' class='rest-select' onclick='writeRestData(2)'><img src='img/r2.gif'></img></button></td>
+						<td align='center'><button name='note-select' title='half rest' class='rest-select' onclick='writeRestData(2)'><img src='img/r2.gif' /></button></td>
-						<td align='center'><button name='note-select' title='quarter rest' class='rest-select' onclick='writeRestData(4)'><img src='img/r4.gif'></img></button></td>
+						<td align='center'><button name='note-select' title='quarter rest' class='rest-select' onclick='writeRestData(4)'><img src='img/r4.gif' /></button></td>
-						<td align='center'><button name='note-select' title='8th rest' class='rest-select' onclick='writeRestData(8)'><img src='img/r8.gif'></img></button></td>
+						<td align='center'><button name='note-select' title='8th rest' class='rest-select' onclick='writeRestData(8)'><img src='img/r8.gif' /></button></td>
-						<td align='center'><button name='note-select' title='16th rest' class='rest-select' onclick='writeRestData(16)'><img src='img/r16.gif'></img></button></td>
+						<td align='center'><button name='note-select' title='16th rest' class='rest-select' onclick='writeRestData(16)'><img src='img/r16.gif' /></button></td>
-						<td align='center'><button name='note-select' title='32nd rest' class='rest-select' onclick='writeRestData(32)'><img src='img/r32.gif'></img></button></td>
+						<td align='center'><button name='note-select' title='32nd rest' class='rest-select' onclick='writeRestData(32)'><img src='img/r32.gif' /></button></td>
-						<td align='center'><button name='note-select' title='64th rest' class='rest-select' onclick='writeRestData(64)'><img src='img/r64.gif'></img></button></td>
+						<td align='center'><button name='note-select' title='64th rest' class='rest-select' onclick='writeRestData(64)'><img src='img/r64.gif' /></button></td>
 					</tr>
 				</table>
 			</td></tr>
@@ -299,8 +298,18 @@
 			</tr>
 
 			<tr>
-				<td align='center'><input type='radio' name='channel_select' checked='checked' onclick='toggleChannel(1)'>Channel 1</input>
+				<td align='center'>
-				<td align='center'><input type='radio' name='channel_select' onclick='toggleChannel(2)'>Channel 2</input></td>
+					<label>
+						<input type='radio' name='channel_select' checked='checked' onclick='toggleChannel(1)' />
+						Channel 1
+					</label>
+				</td>
+				<td align='center'>
+					<label>
+						<input type='radio' name='channel_select' onclick='toggleChannel(2)' />
+						Channel 2
+					</label>
+				</td>
 			</tr>
 			<tr>
 				<td>
@@ -442,7 +451,7 @@
 	<!-- END FAQ -->
 
 	<script type='text/javascript'>disableNils();</script>
-	<bgsound id='sound'> <!-- IE only -->
+	<audio id='sound'></audio>
 
 	</body>
 </html>