BufferSource 如何编辑audioBuffer使得音乐倒放【AudioContext系列三】

标题党😀，实际文章要让你有些发散思维，通过audioBuffer可以做到什么功能。

• 裁切音乐
• 正反播放顺序
• audioBuffer 可视化

前面提到过使用audioContext播放音乐

const analyser = audioContext.createAnalyser();
	audioBufferSourceNode = audioContext.createBufferSource();
	audioBufferSourceNode.connect(analyser);
	analyser.connect(audioContext.destination);
	audioBufferSourceNode.buffer = audioBuffer; //load decode 获取audioBuffer
	audioBufferSourceNode.start(0);

裁切音乐，其实就是创建AudioBuffer 并且赋值的过程。

• audioContext.createBuffer();
• audioBuffer.getChannelData()

这两个方法具体可以查看 https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext/createBuffer

function getBufferBetween(start, end){
	let _dur = gbuffer.duration * ((end-start)/cs.width);
	let _start = Math.floor(gbuffer.getChannelData(0).length*(start/cs.width));
	let _end = Math.floor(gbuffer.getChannelData(0).length*(end/cs.width)) ;
	let _bf = audioContext.createBuffer(2, audioContext.sampleRate * _dur, audioContext.sampleRate);
	for (let channel = 0; channel < 2; channel++) {
	  for (var i = 0; i < _bf.length; i++) {
	    _bf.getChannelData(channel)[i] = gbuffer.getChannelData(channel)[_start+i];
	  }
	}
	return _bf;
}

从本地选择音频文件，选择播放区间，体验地址 http://works.ibeeger.com/learn/audioctx/clip.html

如果这一步都可以想的明白，那就应该知道正反顺序播放怎么实现了，对了颠倒一下顺序，就可以实现了~，完全不知道是什么歌曲了

http://works.ibeeger.com/learn/audioctx/index.html