<div class="page">
<p>May not work with older versions of safari, ie and some mobile browsers.</p>
<ol class="scale-1">
  <li data-note="A"  class="A"  onclick="playA()" >A</li>
  <li data-note="Ax" class="Ax" onclick="playAx()">Ax</li>
  <li data-note="B"  class="B"  onclick="playB()" >B</li>
  <li data-note="Bx" class="Bx" onclick="playBx()">Bx</li>
  <li data-note="C"  class="C"  onclick="playC()" >C</li>
  <li data-note="Cx" class="Cx" onclick="playCx()">Cx</li>
  <li data-note="D"  class="D"  onclick="playD()" >D</li>
  <li data-note="Dx" class="Dx" onclick="playDx()">Dx</li>
  <li data-note="E"  class="E"  onclick="playE()" >E</li>
  <li data-note="Ex" class="Ex" onclick="playEx()">Ex</li>
  <li data-note="F"  class="F"  onclick="playF()" >F</li>
  <li data-note="Fx" class="Fx" onclick="playFx()">Fx</li>
  <li data-note="G"  class="G"  onclick="playG()" >G</li>
  <li data-note="Gx" class="Gx" onclick="playGx()">Gx</li>
  <li data-note="H"  class="H"  onclick="playH()" >H</li>
  <li data-note="Hx" class="Hx" onclick="playHx()">Hx</li>  
  <li data-note="I"  class="I"  onclick="playI()" >I</li>
  <li data-note="Ix" class="Ix" onclick="playIx()">Ix</li>
  <li data-note="J"  class="J"  onclick="playJ()" >J</li>
  <li data-note="Jx" class="Jx" onclick="playJx()">Jx</li>
  <li data-note="K"  class="K"  onclick="playK()" >K</li>
  <li data-note="Kx" class="Kx" onclick="playKx()">Kx</li>
  <li data-note="L"  class="L"  onclick="playL()" >L</li>
  <li data-note="Lx" class="Lx" onclick="playLx()">Lx</li>
  <li data-note="M"  class="M"  onclick="playM()" >M</li>
  <li data-note="Mx" class="Mx" onclick="playMx()">Mx</li>
  <li data-note="N"  class="N"  onclick="playN()" >N</li>
  <li data-note="Nx" class="Nx" onclick="playNx()">Nx</li>
  <li data-note="O"  class="O"  onclick="playO()" >O</li>
</ol> 
</div>

.page {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  
p {
  text-align: center;
  font-weight: 200;
  background-color: rgb(61,61,61);
  color: #888;
  padding: 5px 0;
  margin: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 12px;
}

  .scale-1 {
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 100%;
  }

  li {
    display: flex;
    flex: 1;
    cursor: pointer;
    min-width: 1px;
    /*LETTERS*/color: transparent;
  }
  
  li:active {
    box-shadow: inset 0px 0px 15px rgba(0,0,0,1.0);
    transition: all 0.05s ease-in-out; 
  }
  
.A  { background-color: #1A2229; }
.Ax { background-color: #BBD5EA; }
.B  { background-color: #FE7221; }
.Bx { background-color: #FFDA6C; }      
.C  { background-color: #7198A7; }
.Cx { background-color: #FFFFFF; }
.D  { background-color: #57534D; }
.Dx { background-color: #FFFFFF; }
.E  { background-color: #293337; }
.Ex { background-color: #66635E; }
.F  { background-color: #492F21; }
.Fx { background-color: #57534D; }
.G  { background-color: #FFFFFF; }
.Gx { background-color: #5E7B8A; }
.H  { background-color: #5C5F6D; }
.Hx { background-color: #2D3640; }
.I  { background-color: #5E7B8A; }
.Ix { background-color: #1E2F54; }
.J  { background-color: #1A2229; }
.Jx { background-color: #FE7221; }
.K  { background-color: #36515F; }
.Kx { background-color: #FFFFFF; }
.L  { background-color: #000000; }
.Lx { background-color: #36515F; }
.M  { background-color: #5E7B8A; }
.Mx { background-color: #2D3640; }
.N  { background-color: #5E7B8A; }
.Nx { background-color: #FFFFFF; }
.O  { background-color: #1A2229; }

var a = new Audio("https://www.dropbox.com/s/0s6r07d27uj0h4g/A_donner1.ogg?raw=1");
var ax = new Audio("https://www.dropbox.com/s/bux6czbe7bm378u/Ax_moewen.ogg?raw=1");
var b = new Audio("https://www.dropbox.com/s/vr0dgn7dnqoho39/B_japanisch.ogg?raw=1");
var bx = new Audio("https://www.dropbox.com/s/ssbp6uwe8yiskev/Bx_Kurzes_Arpeggio_Sarod.ogg?raw=1");
var c = new Audio("https://www.dropbox.com/s/cidlo706d9vhgri/C_Moeven.ogg?raw=1");
var cx = new Audio("https://www.dropbox.com/s/kn2nl6baur1gbnx/Cx_wind.ogg?raw=1");
var d = new Audio("https://www.dropbox.com/s/ujq3kccwgi6cden/D_wellen_klippen.ogg?raw=1");
var dx = new Audio("https://www.dropbox.com/s/pqu3e9foqa7ir6a/Dx_Wind.ogg?raw=1");
var e = new Audio("https://www.dropbox.com/s/h96gdjebu2h3gds/E_wellen_klippen.ogg?raw=1");
var ex = new Audio("https://www.dropbox.com/s/6aajuhoa1ivb1bu/Ex_Welle_bricht.ogg?raw=1");
var f = new Audio("https://www.dropbox.com/s/o98w6mlg885xhpq/F_Stein_Fluesterer.ogg?raw=1");
var fx = new Audio("https://www.dropbox.com/s/ez0gl1u3mlpnh27/Fx_Wellen_Klippen.ogg?raw=1");
var g = new Audio("https://www.dropbox.com/s/0n0ynpanxmhi1jp/G_wellen_windig.ogg?raw=1");
var gx = new Audio("https://www.dropbox.com/s/xxcw045370lk9cf/Gx_See_Unwetter.ogg?raw=1");
var h = new Audio("https://www.dropbox.com/s/me3tfy9d7rwr7mi/H_Plaetschern_Welle.ogg?raw=1");
var hx = new Audio("https://www.dropbox.com/s/ulhilyxwo5ggg7m/Hx_wellen_rauschen.ogg?raw=1");
var i = new Audio("https://www.dropbox.com/s/qsi9utaur9w462w/I_plaetschern.ogg?raw=1");
var ix = new Audio("https://www.dropbox.com/s/qtrgo08lvt6qxeb/Ix_unterwasser2.ogg?raw=1");
var j = new Audio("https://www.dropbox.com/s/6m5qhwyu8aadgtj/J_Unterwasser_Radar.ogg?raw=1");
var jx = new Audio("https://www.dropbox.com/s/0a2deccwrtld0n7/Jx_japanisch_rauschen.ogg?raw=1");
var k = new Audio("https://www.dropbox.com/s/8tdzmhkis98lin7/K_wilde_Wellen.ogg?raw=1");
var kx = new Audio("https://www.dropbox.com/s/mtjiasnbicqhwk8/Kx_Grosse_Welle2.ogg?raw=1");
var l = new
Audio("https://www.dropbox.com/s/hq46z49sc3la8qa/L_Unterwasser_Rauschen.ogg?raw=1");
var lx = new Audio("https://www.dropbox.com/s/94lwp90nal5e1ch/Lx_unterwasser.ogg?raw=1");
var m = new Audio("https://www.dropbox.com/s/39vtqr0ule7fhik/M_strudel.ogg?raw=1");
var mx = new Audio("https://www.dropbox.com/s/smi9kdufkl3r36v/Mx_wellen_unwetter.ogg?raw=1");
var n = new Audio("https://www.dropbox.com/s/dtfrndawzttsvmk/N_wellen_rauschen.ogg?raw=1");
var nx = new Audio("https://www.dropbox.com/s/1d9obb6ms0nzbxi/Nx_schaum.ogg?raw=1");
var o = new Audio("https://www.dropbox.com/s/c4eqpzwcjjv421b/O_Wasserstroemung.ogg?raw=1");

function playA() {
  a.currentTime=0;
  a.play();
}

function playAx() {
  ax.currentTime=0;
  ax.play();
}

function playB() {
  b.currentTime=0;
  b.play();
}

function playBx() {
  bx.currentTime=0;
  bx.play();
}

function playC() {
  c.currentTime=0;
  c.play();
}

function playCx() {
  cx.currentTime=0;
  cx.play();
}

function playD() {
  d.currentTime=0;
  d.play();
}

function playDx() {
  dx.currentTime=0;
  dx.play();
}

function playE() {
  e.currentTime=0;
  e.play();
}

function playEx() {
  ex.currentTime=0;
  ex.play();
}

function playF() {
  f.currentTime=0;
  f.play();
}

function playFx() {
  fx.currentTime=0;
  fx.play();
}

function playG() {
  g.currentTime=0;
  g.play();
}

function playGx() {
  gx.currentTime=0;
  gx.play();
}

function playH() {
  h.currentTime=0;
  h.play();
}

function playHx() {
  hx.currentTime=0;
  hx.play();
}

function playI() {
  i.currentTime=0;
  i.play();
}

function playIx() {
  ix.currentTime=0;
  ix.play();
}

function playJ() {
  j.currentTime=0;
  j.play();
}

function playJx() {
  jx.currentTime=0;
  jx.play();
}

function playK() {
  k.currentTime=0;
  k.play();
}

function playKx() {
  kx.currentTime=0;
  kx.play();
}

function playL() {
  l.currentTime=0;
  l.play();
}

function playLx() {
  lx.currentTime=0;
  lx.play();
}

function playM() {
  m.currentTime=0;
  m.play();
}

function playMx() {
  mx.currentTime=0;
  mx.play();
}

function playN() {
  n.currentTime=0;
  n.play();
}

function playNx() {
  nx.currentTime=0;
  nx.play();
}

function playO() {
  o.currentTime=0;
  o.play();
}