Here's the buttons to trigger samples in the body
<tr>
<td><button class="pads" id="Kick">Kick<input type="range" min="0" max="1" step="0.01" value="1" class="padgain" /></button></td>
<td><button class="pads" id="Snare">Snare</button></td>
<td><button class="pads" id="Hi-Hat">Hi-Hat</button></td>
</tr>
<tr>
<td><button class="pads" id="Roll">Roll</button></td>
<td><button class="pads" id="Crash">Crash</button></td>
<td><button class="pads" id="Tom">Tom</button></td>
</tr>
</table>
then in the script section
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
// var gainMaster = context.createGainNode();
// Buffer array we'll be using to store the samples we load
// Sample buffers can be used like so: samples[key], e.g. samples["piano"]
var samples = [];
$(document).ready(function() {
// Attempt to retrieve the given sample from the server and store it in the supplied buffer array with the given key
function loadSample(url, destBuffer, key){
// Set up the request to retrieve the sample
var request = new XMLHttpRequest();
request.open('GET', url, true);
// Use GET for retrieving a resource
request.responseType = 'arraybuffer'; // Format of retrieved resource (raw array)
// Asynchronous callback for when the sample has been retrieved
request.onload = function()
{
// Decode the raw data into a suitable audio buffer
audioCtx.decodeAudioData(request.response, // Source to be decoded (here, the response)
function(buffer) {destBuffer[key] = buffer;},
function() {alert("The file " + url + " could not be loaded!");} ); // Callback function for unsuccessful decoding
}
// Go ahead and submit the request
request.send();
}
var selectedPad = "";
var padCutoffs = [];
padCutoffs["Kick"] = 20000;
padCutoffs["Snare"] = 20000;
padCutoffs["Tom"] = 20000;
padCutoffs["Crash"] = 20000;
padCutoffs["Roll"] = 20000;
padCutoffs["Hi-Hat"] = 20000;
var paddelay = [];
paddelay["Kick"] = 0.25;
paddelay["Snare"] = 0.25;
paddelay["Tom"] = 0.25;
paddelay["Crash"] = 0.25;
paddelay["Roll"]= 0.25;
paddelay["Hi-Hat"]= 0.25;
loadSample ("Kick.wav", samples, "Kick");
loadSample ("Snare.wav", samples, "Snare");
loadSample ("Tom.wav", samples, "Tom");
loadSample ("Crash.wav", samples, "Crash");
loadSample ("Roll.wav", samples, "Roll");
loadSample ("Hi-Hat.wav", samples, "Hi-Hat");
$('#delay').on("change mousemove", function(){
paddelay[selectedPad] = $(this).val() * 1.5;
});
$('#filter').on("change mousemove", function() {
padCutoffs[selectedPad] = $(this).val()* 500; //look up linear to log
});
// Event handler for any button with "sample" class
$(".pads").button().mousedown(function(event){
// if mousedown time > 0.5 {
// }
selectedPad = this.id;
// Create an AudioBufferSourceNode
var playSound = audioCtx.createBufferSource();
var biquadFilter = audioCtx.createBiquadFilter();
biquadFilter.type = "lowpass";
biquadFilter.Q.value = 1;
biquadFilter.frequency.value = padCutoffs[this.id];
playSound.connect(biquadFilter);
var myDelay = audioCtx.createDelay(0.25);
myDelay.delayTime.value = paddelay[this.id];
biquadFilter.connect(myDelay);
var gainMaster = audioCtx.createGain();
gainMaster.gain.value = 5;
myDelay.connect(gainMaster);
// Note: the Web Audio spec is moving from constants to strings. // filter.type = 'lowpass';
// this.id has the key for the buffer in the array we wish to use
// (retrieved from the button that was clicked)
// Go ahead and assign this buffer to the AudioBufferSourceNode
playSound.buffer = samples[this.id]
// Connect the AudioBufferSourceNode to the context's output
// playSound.connect(audioCtx.destination);
// Queue the AudioBufferSourceNode up for playback immediately
// playSound.start();
//playSound.connect(audioCtx.destination);
playSound.start();
gainMaster.connect(audioCtx.destination);
});
I also have a few problems such as conversion of linear to log for the filter slider, another issue is I want to make a time limit in which if the pad is pressed for longer than that time it will trigger a vertical slider to control individual gain/volume of that sound.
I know this might not be well formatted bare with me please thanks in advance
Aucun commentaire:
Enregistrer un commentaire