Khthon and waveform

let sound;

let samples;

let numFrames;

let isPlaying = false;

let playhead = 0;

​

// Variables for padding and dimensions

const topPadding = 20;

const bottomPadding = 20;

const leftPadding = 150;

const rightPadding = 100;

const waveformHeight = 35;

​

// Variables for waveform display

let displaySamples;

const displaySampleRate = 100;

​

let timeFont;

​

function preload() {

    sound = loadSound('mp3.mp3');

}

​

function setup() {

    createCanvas(800, 75);

​

    // Access sound buffer and get the waveform data

    const buffer = sound.buffer;

    numFrames = buffer.length;

    const rawSamples = buffer.getChannelData(0); // Use the first channel data

​

    // Prepare display samples (we'll use every displaySampleRate-th sample)

    const displaySampleCount = Math.floor(numFrames / displaySampleRate);

    displaySamples = new Array(displaySampleCount);

​

    // Find max amplitude across all samples and prepare display samples

    let maxAmp = 0;

    for (let i = 0; i < displaySampleCount; i++) {

        const sampleIndex = i * displaySampleRate;

        const sample = rawSamples[sampleIndex];

        maxAmp = max(maxAmp, abs(sample));

        displaySamples[i] = sample;

    }

​

    // Normalize display samples

    for (let i = 0; i < displaySampleCount; i++) {

        displaySamples[i] /= maxAmp;

    }

​

    // Initialize playhead at the start of the waveform

    playhead = leftPadding;

​

    // Use a default p5 font

    textFont('Arial');

}

​

function draw() {

    background(0);

​

    // Draw the grey waveform (unplayed)

    drawWaveform(color(150), leftPadding, width - rightPadding);

​

    // Draw the white waveform (played)

    let playedWidth = map(sound.currentTime(), 0, sound.duration(), leftPadding, width - rightPadding);

    drawWaveform(color(255), leftPadding, playedWidth);

​

    // Draw the playhead line

    stroke(255);

    let playheadX = map(sound.currentTime(), 0, sound.duration(), leftPadding, width - rightPadding);

    line(playheadX, (height - waveformHeight) / 2, playheadX, (height + waveformHeight) / 2);

​

    // Draw the background box

    drawBackgroundBox();

​

    // Draw the vertical line following the mouse if within waveform area

    const isMouseOverWaveform = (mouseX >= leftPadding && mouseX <= width - rightPadding && mouseY >= (height - waveformHeight) / 2 && mouseY <= (height + waveformHeight) / 2);

    if (isMouseOverWaveform) {

        stroke(255);

        line(mouseX, 0, mouseX, height);

    }

​

    // Display times

    fill(255);

    textAlign(CENTER, CENTER);

    text(formatTime(sound.currentTime()), leftPadding / 2 + 30, height / 2);

    text(formatTime(sound.duration() - sound.currentTime()), width - rightPadding / 2, height / 2);

​

    // Draw play/pause button

    drawButton();

}

​

function drawWaveform(col, startX, endX) {

    stroke(col);

    noFill();

    beginShape();

    for (let i = 0; i < displaySamples.length; i++) {

        const x = map(i, 0, displaySamples.length - 1, leftPadding, width - rightPadding);

        const y = map(displaySamples[i], -1, 1, (height + waveformHeight) / 2, (height - waveformHeight) / 2);

        if (x >= startX && x <= endX) {

            vertex(x, y);

        }

    }

    endShape();

}

​

function drawBackgroundBox() {

    noStroke();

    fill(0,100); // Black background with alpha channel for transparency

    rect(0, 0, width, height);

}

​

function mousePressed() {

    if (mouseX >= leftPadding && mouseX <= width - rightPadding && mouseY >= (height - waveformHeight) / 2 && mouseY <= (height + waveformHeight) / 2) {

        const clickPosition = constrain(mouseX, leftPadding, width - rightPadding);

        const newPosition = map(clickPosition, leftPadding, width - rightPadding, 0, sound.duration());

​

        sound.stop();

        sound.play();

        sound.jump(newPosition);

​

        playhead = clickPosition;

        isPlaying = true;

    } else if (mouseX >= 10 && mouseX <= 40 && mouseY >= (height / 2 - 15) && mouseY <= (height / 2 + 15)) {

        togglePlayPause();

    }

}

​

function keyPressed() {

    if (key === ' ') {

        togglePlayPause();

    }

}

​

function togglePlayPause() {

    if (isPlaying) {

        sound.pause();

    } else {

        sound.play();

    }

    isPlaying = !isPlaying;

}

​

function drawButton() {

    fill(0);

    noStroke();

    rect(10, height / 2 - 15, 30, 30);

    fill(255);

    noStroke();

    if (isPlaying) {

        // Draw pause button

        rect(15, height / 2 - 10, 5, 20);

        rect(25, height / 2 - 10, 5, 20);

    } else {

        // Draw play button

        beginShape();

        vertex(15, height / 2 - 10);

        vertex(35, height / 2);

        vertex(15, height / 2 + 10);

        endShape(CLOSE);

    }

}

​

function formatTime(seconds) {

    const minutes = int(seconds / 60);

    const secs = int(seconds % 60);

    return nf(minutes, 2) + ":" + nf(secs, 2);

}

​