reduce waveform height + fix weird math

This commit is contained in:
Jose B
2023-08-14 03:02:56 -05:00
parent 01806ce037
commit 9c9428c456
3 changed files with 7 additions and 5 deletions

View File

@@ -37,8 +37,9 @@ class CustomRecordPlugin extends RecordPlugin {
const dataArray = new Uint8Array(bufferLength); const dataArray = new Uint8Array(bufferLength);
let animationId, previousTimeStamp; let animationId, previousTimeStamp;
const DATA_SIZE = 128.0;
const BUFFER_SIZE = 2 ** 8; const BUFFER_SIZE = 2 ** 8;
const dataBuffer = new Array(BUFFER_SIZE).fill(canvas.height); const dataBuffer = new Array(BUFFER_SIZE).fill(DATA_SIZE);
const drawWaveform = (timeStamp) => { const drawWaveform = (timeStamp) => {
if (!canvasCtx) return; if (!canvasCtx) return;
@@ -64,9 +65,9 @@ class CustomRecordPlugin extends RecordPlugin {
let x = 0; let x = 0;
for (let i = 0; i < dataBuffer.length; i++) { for (let i = 0; i < dataBuffer.length; i++) {
const valueNormalized = dataBuffer[i] / canvas.height; const y = (canvas.height * dataBuffer[i]) / (2 * DATA_SIZE);
const y = (valueNormalized * canvas.height) / 2; const sliceHeight =
const sliceHeight = canvas.height + 1 - y * 2; ((1 - canvas.height) * dataBuffer[i]) / DATA_SIZE + canvas.height;
canvasCtx.fillRect(x, y, (sliceWidth * 2) / 3, sliceHeight); canvasCtx.fillRect(x, y, (sliceWidth * 2) / 3, sliceHeight);
x += sliceWidth; x += sliceWidth;

View File

@@ -48,7 +48,7 @@ export function Dashboard({
return ( return (
<> <>
<div className="relative h-[60svh] w-3/4 flex flex-col"> <div className="relative h-[64svh] w-3/4 flex flex-col">
<div className="text-center pb-1 pt-4"> <div className="text-center pb-1 pt-4">
<h1 className="text-2xl font-bold text-blue-500">Meeting Notes</h1> <h1 className="text-2xl font-bold text-blue-500">Meeting Notes</h1>
</div> </div>

View File

@@ -71,6 +71,7 @@ export default function Recorder(props) {
hideScrollbar: true, hideScrollbar: true,
autoCenter: true, autoCenter: true,
barWidth: 2, barWidth: 2,
height: 90,
}); });
const wsWrapper = _wavesurfer.getWrapper(); const wsWrapper = _wavesurfer.getWrapper();
wsWrapper.style.cursor = "pointer"; wsWrapper.style.cursor = "pointer";