diff --git a/src/audio-util.js b/src/audio-util.js index b7344b2..6b2c289 100644 --- a/src/audio-util.js +++ b/src/audio-util.js @@ -83,31 +83,28 @@ export function drawAudio(audioBuffer) { const VISUAL_AMP = 2 const RANGE = 128 - let min = 1, max = -1 + let min = -1, max = 1 for (let i = 0, nextBlock = BLOCK_SIZE; i < channelData.length;) { - let ssum = 0, sum = 0 + let ssum = 0, sum = 0, x, avg, v // avg amp method - waveform is too small - // for (; i < nextBlock; i++) sum += Math.abs(i >= channelData.length ? 0 : channelData[i]) - // const avg = sum / BLOCK_SIZE - // str += String.fromCharCode(0x0100 + Math.ceil(avg * 100)) + // for (; i < nextBlock; i++) { + // x = i >= channelData.length ? 0 : channelData[i] + // sum += Math.abs(x) + // } + // avg = sum / BLOCK_SIZE + // v = Math.ceil(avg * 100) // rms method // drawback: waveform is smaller than needed for (; i < nextBlock; i++) { - let x = i >= channelData.length ? 0 : channelData[i] + x = i >= channelData.length ? 0 : channelData[i] sum += x ssum += x ** 2 - min = Math.min(min, x) - max = Math.max(max, x) } - const avg = sum / BLOCK_SIZE + avg = sum / BLOCK_SIZE const rms = Math.sqrt(ssum / BLOCK_SIZE) - let v = Math.min(100, Math.ceil(rms * RANGE * VISUAL_AMP / (max - min))) || 0 - - str += String.fromCharCode(0x0100 + v) - let shift = Math.abs(Math.round(avg * RANGE / 2)) - str += (avg > 0 ? '\u0301' : '\u0300').repeat(shift) + v = Math.min(100, Math.ceil(rms * RANGE * VISUAL_AMP / (max - min))) || 0 // signal energy loudness // ref: https://github.com/MTG/essentia/blob/master/src/algorithms/temporal/loudness.cpp @@ -115,8 +112,11 @@ export function drawAudio(audioBuffer) { // const STEVENS_POW = 0.67 // for (;i < nextBlock; i++) ssum += i >= channelData.length ? 0 : channelData[i] ** 2 // const value = (ssum / BLOCK_SIZE) ** STEVENS_POW - // let v = Math.min(100, Math.ceil(value * 100 * VISUAL_AMP)) - // str += String.fromCharCode(0x0100 + v) + // v = Math.min(100, Math.ceil(value * 100 * VISUAL_AMP)) + + str += String.fromCharCode(0x0100 + v) + let shift = Math.abs(Math.round(avg * RANGE / 2)) + str += (avg > 0 ? '\u0301' : '\u0300').repeat(shift) nextBlock += BLOCK_SIZE } diff --git a/src/wavearea.js b/src/wavearea.js index 6a0e926..9565856 100644 --- a/src/wavearea.js +++ b/src/wavearea.js @@ -246,7 +246,7 @@ let state = sprae(wavearea, { selection.set(state.caretOffset) }, - // make sure play/caret line pointer is correct + // make sure play/caret line pointer matches audio updateCaretLine(sel) { // let caretLine = Math.floor(sel.end / state.cols); // // last of segment edge case @@ -274,7 +274,7 @@ let state = sprae(wavearea, { // let lines = Math.ceil(cleanText(segNode.textContent).length / state.cols) || 1; for (let i = 0; i < lines; i++) { let a = document.createElement('a') - let tc = timecode(i * (state.cols || 0) + offset) + let tc = this.timecode(i * (state.cols || 0) + offset) a.href = `#${tc}` a.textContent = tc timecodes.appendChild(a) @@ -283,8 +283,11 @@ let state = sprae(wavearea, { } }, - // util - timecode + // produce display time from frames + timecode(block, ms = 0) { + let time = ((block / state?.total)) * state?.duration || 0 + return `${Math.floor(time / 60).toFixed(0)}:${(Math.floor(time) % 60).toFixed(0).padStart(2, 0)}${ms ? `.${(time % 1).toFixed(ms).slice(2).padStart(ms)}` : ''}` + } }); @@ -346,11 +349,6 @@ wavearea.addEventListener('touchstart', whatsLatency) wavearea.addEventListener('mousedown', whatsLatency) wavearea.addEventListener('keydown', whatsLatency) -// produce display time from frames -function timecode(block, ms = 0) { - let time = ((block / state?.total)) * state?.duration || 0 - return `${Math.floor(time / 60).toFixed(0)}:${(Math.floor(time) % 60).toFixed(0).padStart(2, 0)}${ms ? `.${(time % 1).toFixed(ms).slice(2).padStart(ms)}` : ''}` -} // create play button position observer const caretObserver = new IntersectionObserver(([item]) => {