JSFiddle - React, Tailwind, and code Playground

JavaScript

const ranges = [2,3];

let ctx = new AudioContext();
let source = ctx.createBufferSource();
let sourceLong = ctx.createBufferSource();

navigator.mediaDevices.getUserMedia({audio:true}).then((s)=>{
	let chunks = [];
	let rec = new MediaRecorder(s, {type:'audio/webm;codecs=opus'});
	rec.ondataavailable = (e)=>chunks.push(e.data);
	let p = new Promise((res, rej)=>{
		rec.onstop = e=>{
			s.getTracks().forEach(t=>t.stop());
			res(chunks);
			}
		})
	rec.start();
	setTimeout(()=>rec.stop(), 3000);
	return p;
	})
 .then(chunks => {

	return new Promise(resolve=>{
		let blob = new Blob(chunks, {type:'audio/webm;codecs=opus'});
		console.log(blob);
		let FR = new FileReader();
	
		FR.onload = e=>resolve(FR.result);
		FR.readAsArrayBuffer(blob);
		});
	})
 .then(buf=>{
	return ctx.decodeAudioData(buf);
	})
 .then(audioBuf=>{
 	let bufferL = new Uint8Array(audioBuf.getChannelData(0).buffer);
 	let bufferR = new Uint8Array(audioBuf.getChannelData(1%audioBuf.numberOfChannels).buffer);
 	let t = bufferL.buffer.byteLength;
	let l = ~~(t/3);
	let o = l * 2;
	o = ranges[0] * ctx.sampleRate;
	l = (ranges[1] * ctx.sampleRate) - o;
	
	let shortBuf = ctx.createBuffer(2, l, ctx.sampleRate);
	let sBL = new Uint8Array(shortBuf.getChannelData(0).buffer);
	let sBR = new Uint8Array(shortBuf.getChannelData(1).buffer);
	for(let i=0; i<sBL.byteLength; i++){
		sBL[i] = bufferL[i+o];
		sBR[i] = bufferR[i+o];
		}
	
	source.buffer = shortBuf;
	source.connect(ctx.destination);
	source.loop = true;
  source.start(0);
	})
 .catch(e=>console.log(e));