@arraypress/waveform-player 1.0.0

package/src/drawing.js

@@ -0,0 +1,365 @@
+/**
+ * @module drawing
+ * @description Core waveform drawing styles optimized for visual distinction at all sizes
+ */
+
+import {resampleData} from './utils.js';
+
+/**
+ * Draw standard bars waveform - Classic vertical bars
+ */
+export function drawBars(ctx, canvas, peaks, progress, options) {
+    const dpr = window.devicePixelRatio || 1;
+    const barWidth = options.barWidth * dpr;
+    const barSpacing = options.barSpacing * dpr;
+    const barCount = Math.floor(canvas.width / (barWidth + barSpacing));
+    const resampledPeaks = resampleData(peaks, barCount);
+    const height = canvas.height;
+    const progressWidth = progress * canvas.width;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw all bars first
+    for (let i = 0; i < resampledPeaks.length; i++) {
+        const x = i * (barWidth + barSpacing);
+        if (x + barWidth > canvas.width) break;
+
+        const peakHeight = resampledPeaks[i] * height * 0.9;
+        // Draw from bottom up, not centered
+        const y = height - peakHeight;
+
+        ctx.fillStyle = options.color;
+        ctx.fillRect(x, y, barWidth, peakHeight);
+    }
+
+    // Progress overlay
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, 0, progressWidth, height);
+    ctx.clip();
+
+    for (let i = 0; i < resampledPeaks.length; i++) {
+        const x = i * (barWidth + barSpacing);
+        if (x > progressWidth) break;
+
+        const peakHeight = resampledPeaks[i] * height * 0.9;
+        // Draw from bottom up, not centered
+        const y = height - peakHeight;
+
+        ctx.fillStyle = options.progressColor;
+        ctx.fillRect(x, y, barWidth, peakHeight);
+    }
+
+    ctx.restore();
+}
+
+/**
+ * Draw mirror/SoundCloud style waveform - Symmetrical bars
+ */
+/**
+ * Draw mirror/SoundCloud style waveform - Symmetrical bars
+ */
+export function drawMirror(ctx, canvas, peaks, progress, options) {
+    const dpr = window.devicePixelRatio || 1;
+    const barWidth = options.barWidth * dpr;
+    const barSpacing = options.barSpacing * dpr;
+    const barCount = Math.floor(canvas.width / (barWidth + barSpacing));
+    const resampledPeaks = resampleData(peaks, barCount);
+    const height = canvas.height;
+    const centerY = height / 2;
+    const progressWidth = progress * canvas.width;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw all bars
+    for (let i = 0; i < resampledPeaks.length; i++) {
+        const x = i * (barWidth + barSpacing);
+        if (x + barWidth > canvas.width) break;
+
+        const peakHeight = resampledPeaks[i] * height * 0.45;
+
+        ctx.fillStyle = options.color;
+        ctx.fillRect(x, centerY - peakHeight, barWidth, peakHeight);
+        ctx.fillRect(x, centerY, barWidth, peakHeight);
+    }
+
+    // Progress overlay
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, 0, progressWidth, height);
+    ctx.clip();
+
+    for (let i = 0; i < resampledPeaks.length; i++) {
+        const x = i * (barWidth + barSpacing);
+        if (x > progressWidth) break;
+
+        const peakHeight = resampledPeaks[i] * height * 0.45;
+
+        ctx.fillStyle = options.progressColor;
+        ctx.fillRect(x, centerY - peakHeight, barWidth, peakHeight);
+        ctx.fillRect(x, centerY, barWidth, peakHeight);
+    }
+
+    ctx.restore();
+}
+
+/**
+ * Draw line/oscilloscope style waveform - Smooth flowing wave with glow
+ */
+export function drawLine(ctx, canvas, peaks, progress, options) {
+    const width = canvas.width;
+    const height = canvas.height;
+    const centerY = height / 2;
+    const amplitude = height * 0.35;
+
+    ctx.clearRect(0, 0, width, height);
+
+    // Helper to draw a smooth curve through the peaks
+    const drawCurve = (color, lineWidth, endProgress = 1, addGlow = false) => {
+        if (addGlow) {
+            ctx.shadowBlur = 12;
+            ctx.shadowColor = color;
+        }
+
+        ctx.strokeStyle = color;
+        ctx.lineWidth = lineWidth;
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+
+        ctx.beginPath();
+        ctx.moveTo(0, centerY);
+
+        const points = [];
+        const samples = Math.floor(peaks.length * endProgress);
+
+        // Calculate smoothed points
+        for (let i = 0; i < samples; i++) {
+            const x = (i / (peaks.length - 1)) * width;
+            const peakValue = peaks[i];
+
+            // Create a smooth wave motion
+            const waveOffset = Math.sin(i * 0.1) * peakValue;
+            const y = centerY + (waveOffset * amplitude);
+
+            points.push({x, y});
+        }
+
+        // Draw smooth curve through points using bezier curves
+        for (let i = 0; i < points.length - 1; i++) {
+            const cp1x = points[i].x + (points[i + 1].x - points[i].x) * 0.5;
+            const cp1y = points[i].y;
+            const cp2x = points[i + 1].x - (points[i + 1].x - points[i].x) * 0.5;
+            const cp2y = points[i + 1].y;
+
+            ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, points[i + 1].x, points[i + 1].y);
+        }
+
+        ctx.stroke();
+
+        if (addGlow) {
+            ctx.shadowBlur = 0;
+        }
+    };
+
+    // Draw subtle grid for oscilloscope feel
+    ctx.strokeStyle = 'rgba(255, 255, 255, 0.03)';
+    ctx.lineWidth = 0.5;
+
+    // Horizontal center line
+    ctx.beginPath();
+    ctx.moveTo(0, centerY);
+    ctx.lineTo(width, centerY);
+    ctx.stroke();
+
+    // Vertical grid lines
+    for (let i = 0; i <= 10; i++) {
+        const x = (width / 10) * i;
+        ctx.beginPath();
+        ctx.moveTo(x, 0);
+        ctx.lineTo(x, height);
+        ctx.stroke();
+    }
+
+    // Draw background wave
+    drawCurve(options.color, 2, 1, false);
+
+    // Draw progress with glow
+    if (progress > 0) {
+        drawCurve(options.progressColor, 3, progress, true);
+    }
+}
+
+/**
+ * Draw blocks/LED meter style waveform - Segmented blocks
+ */
+export function drawBlocks(ctx, canvas, peaks, progress, options) {
+    const dpr = window.devicePixelRatio || 1;
+    const barWidth = (options.barWidth || 3) * dpr;
+    const barSpacing = (options.barSpacing || 1) * dpr;
+    const barCount = Math.floor(canvas.width / (barWidth + barSpacing));
+    const resampledPeaks = resampleData(peaks, barCount);
+    const height = canvas.height;
+    const blockSize = 4 * dpr;
+    const blockGap = 2 * dpr;
+    const progressWidth = progress * canvas.width;
+    const centerY = height / 2;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    for (let i = 0; i < resampledPeaks.length; i++) {
+        const x = i * (barWidth + barSpacing);
+        if (x + barWidth > canvas.width) break;
+
+        const peakHeight = resampledPeaks[i] * height * 0.9;
+        const blockCount = Math.floor(peakHeight / (blockSize + blockGap));
+
+        ctx.fillStyle = x < progressWidth ? options.progressColor : options.color;
+
+        // Draw blocks from center outward
+        for (let j = 0; j < blockCount; j++) {
+            const blockOffset = j * (blockSize + blockGap);
+
+            // Upper blocks
+            ctx.fillRect(x, centerY - blockOffset - blockSize, barWidth, blockSize);
+
+            // Lower blocks (skip the center block)
+            if (j > 0) {
+                ctx.fillRect(x, centerY + blockOffset, barWidth, blockSize);
+            }
+        }
+    }
+}
+
+/**
+ * Draw dots style waveform - Circular points
+ */
+export function drawDots(ctx, canvas, peaks, progress, options) {
+    const dpr = window.devicePixelRatio || 1;
+    const barWidth = (options.barWidth || 2) * dpr;
+    const barSpacing = (options.barSpacing || 3) * dpr;
+    const barCount = Math.floor(canvas.width / (barWidth + barSpacing));
+    const resampledPeaks = resampleData(peaks, barCount);
+    const height = canvas.height;
+    const dotRadius = Math.max(1.5 * dpr, barWidth / 2);
+    const progressWidth = progress * canvas.width;
+    const centerY = height / 2;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    for (let i = 0; i < resampledPeaks.length; i++) {
+        const x = i * (barWidth + barSpacing) + barWidth / 2;
+        if (x > canvas.width) break;
+
+        const peakHeight = resampledPeaks[i] * height * 0.9;
+
+        ctx.fillStyle = x < progressWidth ? options.progressColor : options.color;
+
+        // Draw upper dot
+        ctx.beginPath();
+        ctx.arc(x, centerY - peakHeight / 2, dotRadius, 0, Math.PI * 2);
+        ctx.fill();
+
+        // Draw lower dot
+        ctx.beginPath();
+        ctx.arc(x, centerY + peakHeight / 2, dotRadius, 0, Math.PI * 2);
+        ctx.fill();
+    }
+}
+
+/**
+ * Draw seekbar style - Simple progress bar without waveform
+ */
+export function drawSeekbar(ctx, canvas, peaks, progress, options) {
+    const width = canvas.width;
+    const height = canvas.height;
+    const centerY = height / 2;
+    const barHeight = 4; // Height of the seekbar in pixels
+    const borderRadius = barHeight / 2;
+
+    ctx.clearRect(0, 0, width, height);
+
+    // Draw background track
+    ctx.fillStyle = options.color || 'rgba(255, 255, 255, 0.2)';
+
+    // Create rounded rectangle for background
+    ctx.beginPath();
+    ctx.moveTo(borderRadius, centerY - barHeight / 2);
+    ctx.lineTo(width - borderRadius, centerY - barHeight / 2);
+    ctx.arc(width - borderRadius, centerY, barHeight / 2, -Math.PI / 2, Math.PI / 2);
+    ctx.lineTo(borderRadius, centerY + barHeight / 2);
+    ctx.arc(borderRadius, centerY, barHeight / 2, Math.PI / 2, -Math.PI / 2);
+    ctx.closePath();
+    ctx.fill();
+
+    // Draw progress
+    if (progress > 0) {
+        const progressWidth = Math.max(borderRadius * 2, progress * width);
+
+        // Add subtle glow effect
+        ctx.shadowBlur = 8;
+        ctx.shadowColor = options.progressColor;
+
+        ctx.fillStyle = options.progressColor || 'rgba(255, 255, 255, 0.9)';
+
+        // Create rounded rectangle for progress
+        ctx.beginPath();
+        ctx.moveTo(borderRadius, centerY - barHeight / 2);
+        ctx.lineTo(progressWidth - borderRadius, centerY - barHeight / 2);
+        ctx.arc(progressWidth - borderRadius, centerY, barHeight / 2, -Math.PI / 2, Math.PI / 2);
+        ctx.lineTo(borderRadius, centerY + barHeight / 2);
+        ctx.arc(borderRadius, centerY, barHeight / 2, Math.PI / 2, -Math.PI / 2);
+        ctx.closePath();
+        ctx.fill();
+
+        ctx.shadowBlur = 0;
+
+        // Draw progress handle/thumb
+        const handleRadius = 8;
+        const handleX = progressWidth;
+
+        // Handle shadow
+        ctx.shadowBlur = 4;
+        ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
+        ctx.shadowOffsetY = 2;
+
+        // Handle circle
+        ctx.fillStyle = '#ffffff';
+        ctx.beginPath();
+        ctx.arc(handleX, centerY, handleRadius, 0, Math.PI * 2);
+        ctx.fill();
+
+        // Handle inner circle (for depth)
+        ctx.shadowBlur = 0;
+        ctx.shadowOffsetY = 0;
+        ctx.fillStyle = options.progressColor || 'rgba(255, 255, 255, 0.9)';
+        ctx.beginPath();
+        ctx.arc(handleX, centerY, handleRadius * 0.4, 0, Math.PI * 2);
+        ctx.fill();
+    }
+}
+
+/**
+ * Map of style names to drawing functions
+ * 6 visually distinct styles including a simple seekbar
+ */
+export const DRAWING_STYLES = {
+    'bars': drawBars,        // Classic vertical bars
+    'mirror': drawMirror,    // SoundCloud-style symmetrical
+    'line': drawLine,        // Smooth oscilloscope wave
+    'blocks': drawBlocks,    // LED meter segmented
+    'dots': drawDots,        // Circular points
+    'seekbar': drawSeekbar   // Simple progress bar (no waveform)
+};
+
+/**
+ * Main drawing function that delegates to appropriate style
+ * @param {CanvasRenderingContext2D} ctx - Canvas context
+ * @param {HTMLCanvasElement} canvas - Canvas element
+ * @param {number[]} peaks - Waveform peak data
+ * @param {number} progress - Progress (0-1)
+ * @param {Object} options - Drawing options
+ */
+export function draw(ctx, canvas, peaks, progress, options) {
+    const drawFunc = DRAWING_STYLES[options.waveformStyle] || drawBars;
+    drawFunc(ctx, canvas, peaks, progress, options);
+}

package/src/index.js

@@ -0,0 +1,51 @@
+/**
+ * WaveformPlayer
+ *
+ * Modern audio player with waveform visualization
+ *
+ * @version 1.0.0
+ */
+
+// Import the main class
+import {WaveformPlayer} from './core.js';
+
+// Auto-initialization for data attributes
+function autoInit() {
+    if (typeof document === 'undefined') return;
+
+    const elements = document.querySelectorAll('[data-waveform-player]');
+
+    elements.forEach(element => {
+        if (element.dataset.waveformInitialized === 'true') return;
+
+        try {
+            new WaveformPlayer(element);
+            element.dataset.waveformInitialized = 'true';
+        } catch (error) {
+            console.error('Failed to initialize WaveformPlayer:', error, element);
+        }
+    });
+}
+
+// Initialize when DOM is ready
+if (typeof document !== 'undefined') {
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', autoInit);
+    } else {
+        autoInit();
+    }
+}
+
+// Add init method
+WaveformPlayer.init = autoInit;
+
+// For CDN/browser usage
+if (typeof window !== 'undefined') {
+    window.WaveformPlayer = WaveformPlayer;
+}
+
+// Default export for ES modules
+export default WaveformPlayer;
+
+// Named exports
+export {WaveformPlayer};

package/src/themes.js

@@ -0,0 +1,94 @@
+/**
+ * @module themes
+ * @description Color presets and default options for WaveformPlayer
+ */
+
+/**
+ * Color presets - simple dark/light defaults that can be overridden
+ */
+export const COLOR_PRESETS = {
+    dark: {
+        waveformColor: 'rgba(255, 255, 255, 0.3)',
+        progressColor: 'rgba(255, 255, 255, 0.9)',
+        buttonColor: 'rgba(255, 255, 255, 0.9)',
+        buttonHoverColor: 'rgba(255, 255, 255, 1)',
+        textColor: '#ffffff',
+        textSecondaryColor: 'rgba(255, 255, 255, 0.6)',
+        backgroundColor: 'rgba(255, 255, 255, 0.03)',
+        borderColor: 'rgba(255, 255, 255, 0.1)'
+    },
+    light: {
+        waveformColor: 'rgba(0, 0, 0, 0.2)',
+        progressColor: 'rgba(0, 0, 0, 0.8)',
+        buttonColor: 'rgba(0, 0, 0, 0.8)',
+        buttonHoverColor: 'rgba(0, 0, 0, 0.9)',
+        textColor: '#333333',
+        textSecondaryColor: 'rgba(0, 0, 0, 0.6)',
+        backgroundColor: 'rgba(0, 0, 0, 0.02)',
+        borderColor: 'rgba(0, 0, 0, 0.1)'
+    }
+};
+
+/**
+ * Default player options
+ */
+export const DEFAULT_OPTIONS = {
+    // Core settings
+    url: '',
+    height: 60,
+    samples: 200,
+
+    // Default waveform style
+    waveformStyle: 'mirror',
+    barWidth: 2,
+    barSpacing: 0,
+
+    // Color preset (dark/light or null for custom)
+    colorPreset: 'dark',
+
+    // Individual color overrides (null means use preset)
+    waveformColor: null,
+    progressColor: null,
+    buttonColor: null,
+    buttonHoverColor: null,
+    textColor: null,
+    textSecondaryColor: null,
+    backgroundColor: null,
+    borderColor: null,
+
+    // Features
+    autoplay: false,
+    showTime: true,
+    showHoverTime: false,
+    showBPM: false,
+    singlePlay: true,
+    playOnSeek: true,
+
+    // Content
+    title: null,
+    subtitle: null,
+
+    // Icons (SVG)
+    playIcon: '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M8 5v14l11-7z"/></svg>',
+    pauseIcon: '<svg viewBox="0 0 24 24" width="16" height="16"><path d="M6 4h4v16H6zM14 4h4v16h-4z"/></svg>',
+
+    // Callbacks
+    onLoad: null,
+    onPlay: null,
+    onPause: null,
+    onEnd: null,
+    onError: null,
+    onTimeUpdate: null
+};
+
+/**
+ * Style defaults
+ */
+export const STYLE_DEFAULTS = {
+    bars: { barWidth: 3, barSpacing: 1 },
+    mirror: { barWidth: 2, barSpacing: 0 },
+    line: { barWidth: 2, barSpacing: 0 },
+    blocks: { barWidth: 4, barSpacing: 2 },
+    dots: { barWidth: 3, barSpacing: 3 },
+    seekbar: { barWidth: 1, barSpacing: 0 }
+};

package/src/utils.js

@@ -0,0 +1,202 @@
+/**
+ * @module utils
+ * @description Utility functions for WaveformPlayer
+ */
+
+/**
+ * Parse data attributes from element
+ * @param {HTMLElement} element - Element with data attributes
+ * @returns {Object} Parsed options
+ */
+export function parseDataAttributes(element) {
+    const options = {};
+
+    // Core attributes
+    if (element.dataset.url) options.url = element.dataset.url;
+    if (element.dataset.height) options.height = parseInt(element.dataset.height);
+    if (element.dataset.samples) options.samples = parseInt(element.dataset.samples);
+
+    // Waveform style attributes
+    if (element.dataset.waveformStyle) options.waveformStyle = element.dataset.waveformStyle;
+    if (element.dataset.barWidth) options.barWidth = parseInt(element.dataset.barWidth);
+    if (element.dataset.barSpacing) options.barSpacing = parseInt(element.dataset.barSpacing);
+
+    // Color preset
+    if (element.dataset.colorPreset) options.colorPreset = element.dataset.colorPreset;
+
+    // Individual color customization
+    if (element.dataset.waveformColor) options.waveformColor = element.dataset.waveformColor;
+    if (element.dataset.progressColor) options.progressColor = element.dataset.progressColor;
+    if (element.dataset.buttonColor) options.buttonColor = element.dataset.buttonColor;
+    if (element.dataset.buttonHoverColor) options.buttonHoverColor = element.dataset.buttonHoverColor;
+    if (element.dataset.textColor) options.textColor = element.dataset.textColor;
+    if (element.dataset.textSecondaryColor) options.textSecondaryColor = element.dataset.textSecondaryColor;
+    if (element.dataset.backgroundColor) options.backgroundColor = element.dataset.backgroundColor;
+    if (element.dataset.borderColor) options.borderColor = element.dataset.borderColor;
+
+    // Legacy support for old attribute names
+    if (element.dataset.color) options.waveformColor = element.dataset.color;
+    if (element.dataset.theme) options.colorPreset = element.dataset.theme;
+
+    // Feature flags
+    if (element.dataset.autoplay) options.autoplay = element.dataset.autoplay === 'true';
+    if (element.dataset.showTime) options.showTime = element.dataset.showTime === 'true';
+    if (element.dataset.showHoverTime) options.showHoverTime = element.dataset.showHoverTime === 'true';
+    if (element.dataset.showBpm) options.showBPM = element.dataset.showBpm === 'true';
+    if (element.dataset.singlePlay) options.singlePlay = element.dataset.singlePlay === 'true';
+    if (element.dataset.playOnSeek) options.playOnSeek = element.dataset.playOnSeek === 'true';
+
+    // Content
+    if (element.dataset.title) options.title = element.dataset.title;
+    if (element.dataset.subtitle) options.subtitle = element.dataset.subtitle;
+
+    // Waveform data
+    if (element.dataset.waveform) options.waveform = element.dataset.waveform;
+
+    return options;
+}
+
+/**
+ * Format time in MM:SS format
+ * @param {number} seconds - Time in seconds
+ * @returns {string} Formatted time
+ */
+export function formatTime(seconds) {
+    if (!seconds || isNaN(seconds)) return '0:00';
+
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+
+    return `${mins}:${secs.toString().padStart(2, '0')}`;
+}
+
+/**
+ * Generate unique ID from URL
+ * @param {string} url - Audio URL
+ * @returns {string} Base64 encoded ID
+ */
+export function generateId(url) {
+    const str = url || Math.random().toString();
+    return btoa(str.substring(0, 10)).replace(/[^a-zA-Z0-9]/g, '');
+}
+
+/**
+ * Extract title from URL
+ * @param {string} url - Audio URL
+ * @returns {string} Extracted title
+ */
+export function extractTitleFromUrl(url) {
+    if (!url) return 'Audio';
+
+    const parts = url.split('/');
+    const filename = parts[parts.length - 1];
+    const name = filename.split('.')[0];
+
+    // Clean up common separators
+    return name
+        .replace(/[-_]/g, ' ')
+        .replace(/\b\w/g, l => l.toUpperCase());
+}
+
+/**
+ * Merge multiple option objects
+ * @param {...Object} sources - Option objects to merge
+ * @returns {Object} Merged options
+ */
+export function mergeOptions(...sources) {
+    const result = {};
+
+    for (const source of sources) {
+        for (const key in source) {
+            if (source[key] !== null && source[key] !== undefined) {
+                result[key] = source[key];
+            }
+        }
+    }
+
+    return result;
+}
+
+/**
+ * Debounce function
+ * @param {Function} func - Function to debounce
+ * @param {number} wait - Wait time in ms
+ * @returns {Function} Debounced function
+ */
+export function debounce(func, wait) {
+    let timeout;
+
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+/**
+ * Resample array data
+ * @param {number[]} data - Original data
+ * @param {number} targetLength - Target length
+ * @returns {number[]} Resampled data
+ */
+export function resampleData(data, targetLength) {
+    if (data.length === targetLength) return data;
+    if (data.length === 0 || targetLength === 0) return [];
+
+    const result = [];
+
+    // If upsampling (target is larger than source)
+    if (targetLength > data.length) {
+        const ratio = (data.length - 1) / (targetLength - 1);
+
+        for (let i = 0; i < targetLength; i++) {
+            const index = i * ratio;
+            const lower = Math.floor(index);
+            const upper = Math.ceil(index);
+            const fraction = index - lower;
+
+            // Linear interpolation between samples
+            if (upper >= data.length) {
+                result.push(data[data.length - 1]);
+            } else if (lower === upper) {
+                result.push(data[lower]);
+            } else {
+                const value = data[lower] * (1 - fraction) + data[upper] * fraction;
+                result.push(value);
+            }
+        }
+    } else {
+        // Downsampling (target is smaller than source)
+        const bucketSize = data.length / targetLength;
+
+        for (let i = 0; i < targetLength; i++) {
+            const start = Math.floor(i * bucketSize);
+            const end = Math.floor((i + 1) * bucketSize);
+
+            // Find the maximum value in this bucket
+            let max = 0;
+            let count = 0;
+
+            for (let j = start; j <= end && j < data.length; j++) {
+                if (data[j] > max) {
+                    max = data[j];
+                }
+                count++;
+            }
+
+            // If no samples were found in this bucket, use nearest neighbor
+            if (count === 0) {
+                const nearestIndex = Math.min(Math.round(i * bucketSize), data.length - 1);
+                max = data[nearestIndex];
+            }
+
+            result.push(max);
+        }
+    }
+
+    return result;
+}