I have two one-second audio sources as follows:
var context = system.AudioContext();
var source = context.createBufferSource();
var audioBuffer1 = context.createBuffer(1, float32Array_1.length, context.sampleRate);
audioBuffer1.getChannelData(0).set(float32Array_1);
var audioBuffer2 = context.createBuffer(1, float32Array_2.length, context.sampleRate);
audioBuffer2.getChannelData(0).set(float32Array_2);
Now I want to play these two audio sources with no delay between them. For a single source I can play the audio with the following code:
source.buffer = audioBuffer1;
source.connect(context.destination);
source.start(0);
How can I attach the second source such that there would be no delay between them.
var context = system.AudioContext();
var source = context.createBufferSource();
var source2 = context.createBufferSource();
var audioBuffer1 = context.createBuffer(1, float32Array_1.length, context.sampleRate);
audioBuffer1.getChannelData(0).set(float32Array_1);
var audioBuffer2 = context.createBuffer(1, float32Array_2.length, context.sampleRate);
audioBuffer2.getChannelData(0).set(float32Array_2);
source.buffer = audioBuffer1;
source.connect(context.destination);
source2.buffer = audioBuffer2;
source2.connect(context.destination);
var time = context.currentTime;
source.start(time);
source2.start(time+audioBuffer1.duration);
Related
What I'm trying to do here is play and record a simple sinusoidal wave for a few seconds and save it as a .wav file when the recording is stopped. But, I'm getting this error and the .wav file is empty.
ERR_REQUEST_RANGE_NOT_SATISFIABLE
ERROR MESSAGE:
Here is my full code.
FULL CODE:
<button onclick="play();">PLAY</button>
<button onclick="r.stop();">STOP</button>
<ul id="recordingslist"></ul>
<script type="text/javascript">
const context = new AudioContext();
const stream = context.createMediaStreamDestination();
let o = null,
g = null,
r = null;
function play(){
o = context.createOscillator();
g = context.createGain();
r = new MediaRecorder(stream.stream);
o.type = "sine";
o.connect(g);
o.connect(context.destination);
o.start();
r.start();
r.ondataavailable = function(e) {
var url = window.URL.createObjectURL(e.data);
var li = document.createElement('li');
var au = document.createElement('audio');
var hf = document.createElement('a');
au.controls = true;
au.src = url;
hf.href = url;
hf.download = new Date().toISOString() + '.wav';
hf.innerHTML = hf.download;
li.appendChild(au);
li.appendChild(hf);
document.getElementById('recordingslist').appendChild(li);
o.stop();
};
}
</script>
A few things here.
Regarding the MediaRecorder part, the dataavailable event may fire at any time the browser deems necessary, it may even fire with no data at all.
If you want to record a fixed duration of time, then listen for the stop event to build your download link, and use the dataavailable one only to push the chunks of data the browser will have output during that time:
Regarding the AudioContext part,
you can think of the link connection as a [guitar - pedal(s) - pre-amp - ampli] setup. Each connect being a new wire between two nodes.
In your setup, you did create a gain node, and did connect your oscillator to it, you now need to connect your gain node (g) to the MediaStreamDestinationNode (stream) if you want to record it. Failing to do so, nothing will get passed to the recorder since the stream-destination node will not be connected to anything.
const context = new AudioContext();
const stream = context.createMediaStreamDestination();
document.getElementById('btn').onclick = play;
function play() {
const o = context.createOscillator();
const g = context.createGain();
const r = new MediaRecorder(stream.stream);
o.type = "sine";
g.gain.value = 0.5;
o.connect(g);
// you want to connect the gainNode to the stream-dest
g.connect(stream);
// and to the context's dest (speakers)
g.connect(context.destination);
o.start(0);
// we need an Array to store all the chunks
const chunks = [];
// in dataavailable we only push the new chunks
r.ondataavailable = function(e) {
chunks.push(e.data);
};
// we wait until the recorder has been stopped to build the final media
r.onstop = function(e) {
// concatenate all the chunks in a single Blob
const blob = new Blob(chunks);
const url = window.URL.createObjectURL(blob);
const li = document.createElement('li');
const au = document.createElement('audio');
const hf = document.createElement('a');
au.controls = true;
au.src = url;
hf.href = url;
// setting the filename's extension won't make it a wav file
// what you have here is an ogg-vorbis audio file.
hf.download = new Date().toISOString() + '.oga';
hf.innerHTML = hf.download;
li.appendChild(au);
li.appendChild(hf);
document.getElementById('recordingslist').appendChild(li);
o.stop();
};
r.start();
// stop the recording in 3s
setTimeout(() => {
r.stop();
}, 3000);
}
<button id="btn">start</button>
<ul id="recordingslist"></ul>
I am capturing audio data via JavaScript and intend to send it as a base64 encoded String. Before I even send it, I'm just testing to see if I can reconstruct it and play it, and I'm not having much luck.
In the console, the blob looks like this:
How can I retrieve the initial audioBlob object from the base64 encoded data produced by reader.readAsDataURL(audioBlob) so that I can play it in its correct form?
mediaRecorder.addEventListener("dataavailable", function(event) {
audioChunks.push(event.data);
var audioBlob = new Blob(audioChunks);
// PLAYBACK WORKS HERE!
var audioUrl = URL.createObjectURL(audioBlob);
var audio = new Audio(audioUrl);
audio.play();
var reader = new FileReader();
reader.onload = function(event){
var audioData = event.target.result;
// extracting and decoding just the bas64 data, attempting to reconstruct audioBlob
var base64 = audioData.substr(audioData.lastIndexOf(',') + 1);
var decoded = atob(base64);
var reconstructedAudioBlob = new Blob([decoded], {type: "audio/webm;codecs=opus"});
// PLAYBACK FAILS HERE!
var reconstructedAudioUrl = URL.createObjectURL(reconstructedAudioBlob);
var reconstructedAudio = new Audio(reconstructedAudioUrl);
reconstructedAudio.play();
};
reader.readAsDataURL(audioBlob);
});
This results in a console error: Uncaught (in promise) DOMException
The data for event.target.result (if you manage to decode it and play it, enjoy!) is as follows:
data:application/octet-stream;base64,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
You're on the right track. I would create a function that converts the URI to pure binary by removing the base64 headers, and then setting that as the audio source. Using your data, this should do the trick:
function convertURIToBinary(dataURI) {
let BASE64_MARKER = ';base64,';
let base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
let base64 = dataURI.substring(base64Index);
let raw = window.atob(base64);
let rawLength = raw.length;
let arr = new Uint8Array(new ArrayBuffer(rawLength));
for (let i = 0; i < rawLength; i++) {
arr[i] = raw.charCodeAt(i);
}
return arr;
}
let binary = convertURIToBinary(data);
let blob = new Blob([binary], {
type: 'audio/ogg'
});
let blobUrl = URL.createObjectURL(blob);
$("#source").attr("src", blobUrl);
$("#audio")[0].load();
$("#audio")[0].oncanplaythrough = $("#audio")[0].play();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<audio id="audio" controls>
<source id="source" src="" type="audio/ogg" />
</audio>
<script>
let data = "data:application/octet-stream;base64,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";
</script>
I want to decode an bytearray to audiobuffer and play my wav file in browser using JS.
Here the code i am using but while clicking on play button i am getting an exception i.e. "Unable to decode audio Data".
{
if (!window.AudioContext){
if (!window.webkitAudioContext){
alert("Your browser does not support any AudioContext and cannot play back this audio.");
return;
}
}
var context = new AudioContext();
var arr = me.queueStore.getAt(0).data.ByteAudio;
var arrayBuffer = new ArrayBuffer(arr.length);
var bufferView = new Uint8Array(arrayBuffer);
for (i = 0; i < arr.length; i++) {
bufferView[i] = arr[i];
}
context.decodeAudioData(bufferView, function (buffer) {
var source = context.createBufferSource(); // creates a sound source
source.buffer = buffer; // tell the source which sound to play
source.connect(context.destination);
source.start(0);
});
}
Got the answer , here the solution for this : Use 64bit string to play media files instead converting to audio buffer :
me.fileString = "data:audio/wav;base64," + data.tonebyteArray;
var audio = new Audio(fileString);
audio.play();
I have a node.js server streaming some ArrayBuffers:
var BinaryServer = require('binaryjs').BinaryServer;
var fs = require('fs');
var server = BinaryServer({port: 2000});
server.on('connection', function(client){
var file = fs.createReadStream(__dirname + '/music/02 Enter Sandman.mp3');
client.send(file);
});
On the client, I'm listening to those chunks and trying to play them one after another:
var client = new BinaryClient('ws://localhost:2000');
var context = new AudioContext();
var source = context.createBufferSource();
source.connect(context.destination);
var audioStart = 0;
var audioStop = 0;
client.on('stream', function(stream, meta)
{
stream.on('data', function(data)
{
var audio = new Float32Array(data);
var audioBuffer = context.createBuffer(1, audio.length, 44100);
audioBuffer.getChannelData(0).set(audio);
audioBuffer = context.createBuffer(data, true);
audioStop += audioBuffer.duration;
source = context.createBufferSource();
source.connect(context.destination);
source.buffer = audioBuffer;
source.start(audioStart);
//source.stop(audioStop);
console.log(audioStart + " - " + audioStop);
audioStart += audioBuffer.duration;
});
});
I'm constantly getting this error: Uncaught InvalidStateError: Failed to execute 'start' on 'AudioBufferSourceNode': cannot call start more than once.
Only the first chunk plays
Could someone explain me how this supposed to work?
Thanks!
The problem come with Web Audio API, you can't load two or more sources in the same channel.
You can disconnect source with: source.disconnect();
and reconnect him with: source.connect(context.destination);
More information here: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API
i'm trying to build a waveform generator that get audiofile amplitudes values and display them to a canvas as quick as possible (faster than realtime) in javascript. so i use the OfflineAudioContext / webkitOfflineAudioContext , load the file and start the analyse.
the waveform is to fill a wide canvas.
i analyse buffer in a processor.onaudioprocess function. (i guess it's the way it works ?)
it works fine in firefox but i've got an issue in chrome : it seems it "jumps" over much analyse to finish it works as soon as possible and only returns a few coordinates (something like 16).
here is the jsfiddle :
http://jsfiddle.net/bestiole/95EBf/
// create the audio context
if (! window.OfflineAudioContext) {
if (! window.webkitOfflineAudioContext) {
$('#output').append('failed : no audiocontext found, change browser');
}
window.OfflineAudioContext = window.webkitOfflineAudioContext;
}
//var context = new AudioContext();
var length = 15241583;
var samplerate = 44100;
var fftSamples = 2048;
var waveformWidth = 1920;
var context = new OfflineAudioContext(1,length,samplerate);
var source;
var splitter;
var analyser;
var processor;
var i=0;
var average;
var max;
var coord;
processor = context.createScriptProcessor(fftSamples, 1, 1);
processor.connect(context.destination);
analyser = context.createAnalyser();
analyser.smoothingTimeConstant = 0;
analyser.fftSize = fftSamples;
source = context.createBufferSource();
splitter = context.createChannelSplitter();
source.connect(splitter);
splitter.connect(analyser,0,0);
analyser.connect(processor);
context.oncomplete = function(){
$('#output').append('<br />complete');
}
var request = new XMLHttpRequest();
request.open('GET', "http://www.mindthepressure.org/bounce.ogg", true);
request.responseType = 'arraybuffer';
request.onload = function(){
$('#output').append('loaded ! ');
context.decodeAudioData(request.response, function(buffer) {
$('#output').append('starting analysis<br />');
processor.onaudioprocess = function(e){
var data = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(data);
average = getAverageVolume(data);
max = Math.max.apply(Math, data);
coord = Math.min(average*2,255);
coord = Math.round((max+coord)/2);
ctx.fillStyle=gradient;
ctx.fillRect(i,255-coord,1,255);
console.log(i+' -> '+coord);
i++;
}
source.buffer = buffer;
source.start(0);
context.startRendering();
}, onError);
}
request.send();
function onError(e) {
$('#output').append('error, check the console');
console.log(e);
}
function getAverageVolume(array) {
var values = 0;
var average;
var length = array.length;
for (var k = 0; k < length; k++) {
values += array[k];
}
average = values / length;
return average;
}
(here is another version that forces waveform to fit in 1920px wide and generate a waveform data for who is interested : http://jsfiddle.net/bestiole/E3rSx/ )
i really dont get the point, how doesn't chrome treat every part of the audio file ?
thanks for any help !
Chrome has a bug in script processors in offline mode.