Cloning audio source without having to download it again

Asked
Active3 hr before
Viewed126 times

4 Answers

downloadsourceaudio
90%

Create a new bufferSource and play it on each call,Append the response to a buffer,Download once the file via XMLHttpRequest.,Ask Different (Apple)

window.AudioContext = window.AudioContext || window.webkitAudioContext;
if (!window.AudioContext)
   yourFirstImplementation();
else {
   var buffer,
      ctx = new AudioContext(),
      gainNode = ctx.createGain();
   gainNode.connect(ctx.destination);
   var vol = document.querySelector('input');
   vol.value = gainNode.gain.value;
   vol.addEventListener('change', function() {
      gainNode.gain.value = this.value;
   }, false);

   function createBuffer() {
      ctx.decodeAudioData(this.response, function(b) {
         buffer = b;
      }, function(e) {
         console.warn(e)
      });
      var button = document.querySelector('button');
      button.addEventListener('click', function() {
         playSound(buffer)
      });
      button.className = 'ready';
   }

   var file = 'https://dl.dropboxusercontent.com/s/agepbh2agnduknz/camera.mp3',
      xhr = new XMLHttpRequest();
   xhr.onload = createBuffer;
   xhr.open('GET', file, true);
   xhr.responseType = 'arraybuffer';
   xhr.send();

   function playSound(buf) {
      var source = ctx.createBufferSource();
      source.buffer = buf;
      source.connect(gainNode);
      source.onended = function() {
         if (this.stop) this.stop();
         if (this.disconnect) this.disconnect();
      }
      source.start(0);
   }
}

function yourFirstImplementation() {
   alert('webAudioAPI is not supported by your browser');
}
button {
   opacity: .2;
}
button.ready {
   opacity: 1
};
<button>play</button>
<input type="range" max="5" step=".01" title="volume" />
load more v
88%

connect(destinationNode, output, input),connect(destinationNode, output, input), in §1.5.5 ,disconnect(destinationNode, output, input), in §1.5.5 ,connect(destinationNode, output), in §1.5.5

function outputPerformanceTime(contextTime) {
   const timestamp = context.getOutputTimestamp();
   const elapsedTime = contextTime - timestamp.contextTime;
   return timestamp.performanceTime + elapsedTime * 1000;
}
load more v
72%

AudioBufferSourceNode,AudioBufferSourceNode(),ConstructorAudioBufferSourceNode(),An AudioBufferSourceNode has no inputs and exactly one output, which has the same number of channels as the AudioBuffer indicated by its buffer property. If there's no buffer set—that is, if buffer is null—the output contains a single channel of silence (every sample is 0).

var audioCtx = new(window.AudioContext || window.webkitAudioContext)();

// Create an empty three-second stereo buffer at the sample rate of the AudioContext
var myArrayBuffer = audioCtx.createBuffer(2, audioCtx.sampleRate * 3, audioCtx.sampleRate);

// Fill the buffer with white noise;
//just random values between -1.0 and 1.0
for (var channel = 0; channel < myArrayBuffer.numberOfChannels; channel++) {
   // This gives us the actual ArrayBuffer that contains the data
   var nowBuffering = myArrayBuffer.getChannelData(channel);
   for (var i = 0; i < myArrayBuffer.length; i++) {
      // Math.random() is in [0; 1.0]
      // audio needs to be in [-1.0; 1.0]
      nowBuffering[i] = Math.random() * 2 - 1;
   }
}

// Get an AudioBufferSourceNode.
// This is the AudioNode to use when we want to play an AudioBuffer
var source = audioCtx.createBufferSource();
// set the buffer in the AudioBufferSourceNode
source.buffer = myArrayBuffer;
// connect the AudioBufferSourceNode to the
// destination so we can hear the sound
source.connect(audioCtx.destination);
// start the source playing
source.start();
65%

Defaults to Web Audio API and falls back to HTML5 Audio,Clone the repo: git clone https://github.com/goldfire/howler.js.git,Install with npm: npm install howler,howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms.

<script src="/path/to/howler.js"></script>
<script>
    var sound = new Howl({
      src: ['sound.webm', 'sound.mp3']
    });
</script>
load more v

Other "download-source" queries related to "Cloning audio source without having to download it again"