lundi 18 avril 2016

web audio project sound not playing

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