Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can use the Web Audio API if you are content to sticking with WebKit browsers..</p> <p>Here is some boiler plate "abstracted" code to get your started. Requires a server.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;div id="kickDrum"&gt; &lt;/div&gt; // click and will loop &lt;div id="snareDrum"&gt;&lt;/div&gt; // Won't loop &lt;script&gt; var kickDrum = new audioApiKey("kickDrum","kick.mp3",true); // first argument is the div name, the next is the audio file name &amp; url the last parameter is loop on/off. true means loop on var snareDrum = new audioApiKey("snareDrum","snare.mp3", false); // Below is the abstracted guts. var context = new webkitAudioContext(); function audioApiKey(domNode,fileDirectory,loopOnOff) { this.domNode = domNode; this.fileDirectory = fileDirectory; this.loopOnOff = loopOnOff; var bufferFunctionName = bufferFunctionName; var incomingBuffer; var savedBuffer; var xhr; bufferFunctionName = function () { var source = context.createBufferSource(); source.buffer = savedBuffer; source.loop = loopOnOff; source.connect(context.destination); source.noteOn(0); // Play sound immediately }; var xhr = new XMLHttpRequest(); xhr.open('get',fileDirectory, true); xhr.responseType = 'arraybuffer'; xhr.onload = function () { context.decodeAudioData(xhr.response, function(incomingBuffer) { savedBuffer = incomingBuffer; var note = document.getElementById(domNode); note.addEventListener("click", bufferFunctionName , false); } ); }; xhr.send(); }; &lt;/script&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>&lt;style&gt; #kickDrum { background-color:orange; position:absolute; top:25%; left:25%; width: 200px; height:200px; border-radius:120px; border-style:solid; border-width:15px; border-color:grey; } #snareDrum { background-color:orange; position:absolute; top:25%; left:50%; width: 200px; height:200px; border-radius:120px; border-style:solid; border-width:15px; border-color:grey; } &lt;/style&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload