<audio id="playme" src="notreal.ogg">You're missing out!!</audio>

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="980" height="230" id="svg2" version="1.1" inkscape:version="0.48.2 r9819" sodipodi:docname="sound.svg" inkscape:export-filename="C:\Users\Morgan\Desktop\sound.png" inkscape:export-xdpi="90" inkscape:export-ydpi="90">
  <defs id="defs4"/>
  <sodipodi:namedview id="base" pagecolor="#d9d0bf" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:zoom="0.56730476" inkscape:cx="307.23942" inkscape:cy="164.03788" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" inkscape:showpageshadow="false" showguides="true" inkscape:guide-bbox="true" inkscape:window-width="1920" inkscape:window-height="1005" inkscape:window-x="-9" inkscape:window-y="-9" inkscape:window-maximized="1" inkscape:snap-global="false">
    <sodipodi:guide orientation="1,0" position="10,333.03724" id="guide2985"/>
    <sodipodi:guide orientation="1,0" position="970,192.4812" id="guide2987"/>
    <sodipodi:guide orientation="1,0" position="490,290" id="guide2995"/>
    <sodipodi:guide orientation="0,1" position="41.236815,120.34417" id="guide3818"/>
  </sodipodi:namedview>
  <metadata id="metadata7">
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
        <dc:title/>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g inkscape:label="Calque 1" inkscape:groupmode="layer" id="layer1" transform="translate(0,-822.36218)">
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect2999" width="18.033375" height="84.478539" x="30.054821" y="896.49481" rx="0"/>
    <rect rx="0" y="909.27313" x="49.715618" height="110.74496" width="18.033375" id="rect3775" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect rx="0" y="890.10565" x="69.283546" height="107.90534" width="18.033375" id="rect3777" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3779" width="18.033375" height="136.3015" x="88.944321" y="899.33447" rx="0"/>
    <rect rx="0" y="918.50177" x="108.53545" height="103.64593" width="18.033375" id="rect3781" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3783" width="18.033375" height="111.45487" x="128.19623" y="878.03735" rx="0"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3785" width="18.033375" height="159.7283" x="147.76416" y="846.09167" rx="0"/>
    <rect rx="0" y="867.38873" x="167.42496" height="162.56792" width="18.033375" id="rect3787" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect rx="0" y="852.48077" x="187.01608" height="136.3015" width="18.033375" id="rect3789" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3791" width="18.033375" height="148.36986" x="206.67686" y="860.99957" rx="0"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3793" width="18.033375" height="91.57756" x="226.24478" y="889.39575" rx="0"/>
    <rect rx="0" y="878.03735" x="245.90558" height="167.53726" width="18.033375" id="rect3795" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3797" width="18.033375" height="155.46889" x="265.49673" y="865.96893" rx="0"/>
    <rect rx="0" y="900.75415" x="285.15753" height="105.06576" width="18.033375" id="rect3799" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect rx="0" y="878.74731" x="304.72546" height="156.1788" width="18.033375" id="rect3801" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3803" width="18.033375" height="162.56793" x="324.38623" y="854.61047" rx="0"/>
    <rect rx="0" y="841.12231" x="343.99335" height="202.32253" width="18.033375" id="rect3805" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3807" width="18.033375" height="198.0631" x="363.65414" y="829.76379" rx="0"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3809" width="18.033375" height="157.5986" x="383.22205" y="854.61047" rx="0"/>
    <rect rx="0" y="889.39575" x="402.88287" height="100.80631" width="18.033375" id="rect3811" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3813" width="18.033375" height="136.3015" x="422.47397" y="869.51843" rx="0"/>
    <rect rx="0" y="848.93121" x="442.1348" height="189.54427" width="18.033375" id="rect3815" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect rx="0" y="836.15302" x="461.70267" height="185.99474" width="18.033375" id="rect3817" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3819" width="18.033375" height="136.3015" x="481.36343" y="869.51843" rx="0"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3821" width="18.033375" height="185.28482" x="500.95453" y="857.45013" rx="0"/>
    <rect rx="0" y="847.51147" x="520.6153" height="176.05608" width="18.033375" id="rect3823" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect rx="0" y="900.75415" x="540.18329" height="81.638931" width="18.033375" id="rect3825" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3827" width="18.033375" height="163.98775" x="559.84406" y="877.32745" rx="0"/>
    <rect rx="0" y="855.32037" x="579.43512" height="163.98775" width="18.033375" id="rect3829" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3831" width="18.033375" height="152.62929" x="599.09595" y="830.47375" rx="0"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3833" width="18.033375" height="185.28484" x="618.66388" y="845.38177" rx="0"/>
    <rect rx="0" y="890.3775" x="638.32471" height="158.03662" width="18.033375" id="rect3835" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect rx="0" y="871.96216" x="657.89978" height="133.85779" width="18.033375" id="rect3837" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3839" width="18.033375" height="114.06589" x="677.56055" y="914.47095" rx="0"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3841" width="18.033375" height="146.02519" x="697.12842" y="891.74048" rx="0"/>
    <rect rx="0" y="868.81635" x="716.78931" height="145.52243" width="18.033375" id="rect3843" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3845" width="18.033375" height="106.11226" x="736.38037" y="919.58496" rx="0"/>
    <rect rx="0" y="896.93518" x="756.0412" height="87.587669" width="18.033375" id="rect3847" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect rx="0" y="880.30273" x="775.60907" height="167.4015" width="18.033375" id="rect3849" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3851" width="18.033375" height="151.7805" x="795.2699" y="851.90979" rx="0"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3853" width="18.033375" height="179.49715" x="814.86096" y="834.84167" rx="0"/>
    <rect rx="0" y="884.54535" x="834.52173" height="162.28534" width="18.033375" id="rect3855" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect rx="0" y="859.73395" x="854.08972" height="137.3002" width="18.033375" id="rect3857" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3859" width="18.033375" height="106.19591" x="873.75049" y="879.94775" rx="0"/>
    <rect rx="0" y="882.30292" x="893.34167" height="155.64534" width="18.033375" id="rect3861" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3863" width="18.033375" height="105.49187" x="913.00238" y="912.93835" rx="0"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3865" width="18.033375" height="88.346321" x="932.57043" y="899.37109" rx="0"/>
    <rect rx="0" y="918.04364" x="10.182102" height="40.751793" width="18.033375" id="rect3042" style="fill:#d91e63;fill-opacity:1;stroke:none"/>
    <rect style="fill:#d91e63;fill-opacity:1;stroke:none" id="rect3812" width="18.033375" height="40.751793" x="952.16699" y="918.04364" rx="0"/>
  </g>
</svg>

    $("#layer1 rect").each(function(i) {
        $("#playme").clone().attr({
            "id": "playme-" + i,
            "src": B64Notes[i]
        }).appendTo($("#playme").parent());
        $(this).data("audio", i);
    });
    $("#layer1 rect").hover(function() {
        var playmeNum = $("#playme-" + $(this).data("audio"));
        playmeNum.attr("src", playmeNum[0].src)[0].play();
        // Reset the src to stop and restart so you can mouseover multiple times before the audio is finished
        $(this).css("fill", "red");
    }, function() {
        $(this).css("fill", "#d91e63");
    });

http://jsfiddle.net/SO_AMK/xmXFf/