## Web page (840/796 characters)

\>>> **[Start playing][1]** (Internet Explorer is not supported for multiple reasons; Google Chrome and Opera work best.)

I probably could make this a bit shorter, yet it is a good start. The lower score is after replacing all occurrences of ` ` with the character itself and removing the keyword `new`, the latter change breaking Google Chrome compatibility.

    <style>table{border-collapse:collapse;border-width:1 0;border-style:solid;font-size:64;line-height:2}td{border-style:solid;border-width:0 1}</style><table><td colspan=3 title=0>&nbsp;<td bgcolor=black colspan=2 title=1>&nbsp;<td colspan=2 title=2>&nbsp;<td bgcolor=black colspan=2 title=3>&nbsp;<td colspan=3 title=4>&nbsp;<tr><td colspan=4 title=0>&nbsp;<td colspan=4 title=2>&nbsp;<td colspan=4 title=4>&nbsp;</table><script>for(A=[y=5];y--;){for(s=x=64e3;x--;)s+="~ "[x*(268+17*y)>>13&1];A[y]=new Audio("data:audio/wav;base64,UklGRiXuAgBXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQHuAgCA"+btoa(s))}setInterval("for(y=5;y--;)with(A[y])volume=volume&&Math.exp(-currentTime)",99);onmousedown=function(e){if(z=e.target.title)with(A[z])play(currentTime=0,volume=1)};onmouseup=function(e){if(z=e.target.title)with(A[z])pause(volume=0)}</script>

Save this code as a text file with a name ending in .htm or .html and open it in Chrome or Opera (Safari might also work), or just open the solution's [JSBin page][1] to start playing. I reused the WAV file header from my solution to the [Twinkle Twinkle Little Star](http://codegolf.stackexchange.com/questions/272/twinkle-twinkle-little-star) code golf problem.

An important feature is that the sound diminishes as time passes. To observe this behavior, try holding down a key for a few seconds and listening to what happens.

Here is a more readable version of the code:

    <style>
    	table {
    		border-collapse: collapse;
    		border-width: 1 0;
    		border-style: solid;
    		font-size: 64;
    		line-height: 2;
    	}
    
    	td {
    		border-style: solid;
    		border-width: 0 1;
    	}
    </style>
    
    <table>
    		<td colspan=3 title=0>&nbsp;
    		<td bgcolor=black colspan=2 title=1>&nbsp;
    		<td colspan=2 title=2>&nbsp;
    		<td bgcolor=black colspan=2 title=3>&nbsp;
    		<td colspan=3 title=4>&nbsp;
    	<tr>
    		<td colspan=4 title=0>&nbsp;
    		<td colspan=4 title=2>&nbsp;
    		<td colspan=4 title=4>&nbsp;
    </table>
    
    <script>
    	for (A = [y = 5]; y--;) {
    
    		for (s = x = 64e3; x--;)
    			s += "~ "[x * (268 + 17 * y) >> 13 & 1];
    
    		A[y] = new Audio("data:audio/wav;base64,UklGRiXuAgBXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQHuAgCA" + btoa(s));
    	}
    
    	setInterval(function() {
    		for (y = 5; y--;)
    			with (A[y])
    				volume = volume && Math.exp(-currentTime);
    	}, 99);
    
    	onmousedown = function(e) {
    		if (z = e.target.title)
    			with (A[z])
    				play(currentTime = 0, volume = 1);
    	};
    
    	onmouseup = function(e) { 
    		if (z = e.target.title)
    			with (A[z])
    				pause(volume = 0);
    	}
    </script>

[1]: http://jsbin.com/iponek/4