1. 程式人生 > 實用技巧 >JavaScript 實現音訊剪下

JavaScript 實現音訊剪下

前端實現音訊剪下,實際上是把需要的部分複製出來。

剪下audiobuffer

引用:JS純前端實現audio音訊剪裁剪下複製播放與上傳
實現的原理很簡單,建立一個空的AudioBuffer,複製現有的通道資料前3秒的資料,然後複製的內容寫入到這個空的AudioBuffer,於是我們就得到了一個剪裁後的音訊Buffer資料了。

// 聲道數量和取樣率
var channels = audioBuffer.numberOfChannels;
var rate = audioBuffer.sampleRate;

// 擷取前3秒
var startOffset = 0;
var endOffset = rate * 3;
// 3秒對應的幀數
var frameCount = endOffset - startOffset;

// 建立同樣採用率、同樣聲道數量,長度是前3秒的空的AudioBuffer
var newAudioBuffer = new AudioContext().createBuffer(channels, endOffset - startOffset, rate);
// 建立臨時的Array存放複製的buffer資料
var anotherArray = new Float32Array(frameCount);
// 聲道的資料的複製和寫入
var offset = 0;
for (var channel = 0; channel < channels; channel++) {
    audioBuffer.copyFromChannel(anotherArray, channel, startOffset);
    newAudioBuffer.copyToChannel(anotherArray, channel, offset);
}

// newAudioBuffer就是全新的複製的3秒長度的AudioBuffer物件

剪下arraybuffer

實現原理同上,不同的是,在計算音訊長度是,duration的值為arraybuffer的長度除以samplerate除以2。之所以除以2是因為duration是16bit的pcm格式長度,而arraybuffer的bytelength是8bit的。

const startOffset = 0;
const clipDuration = 3;//擷取前3秒
const clipBuffer = audioBuffer.slice(startOffset , clipDuration * 2 * sampleRate);
// clipBuffer 就是全新的複製的3秒長度的Arraybuffer的物件