JSFiddle - React, Tailwind, and code Playground

by SO_AMK

HTML

<script src="https://dl.dropbox.com/s/y64wjnm96v3k021/audio.js"></script>
<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...

JavaScript

$("#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");
    });