smooth-player 1.0.0

package/dist-cjs/events.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypedEventEmitter = void 0;
+class TypedEventEmitter {
+    constructor() {
+        this.listeners = new Map();
+    }
+    on(event, listener) {
+        const eventListeners = this.listeners.get(event) ?? new Set();
+        eventListeners.add(listener);
+        this.listeners.set(event, eventListeners);
+        return () => this.off(event, listener);
+    }
+    off(event, listener) {
+        this.listeners.get(event)?.delete(listener);
+    }
+    emit(event, payload) {
+        this.listeners.get(event)?.forEach((listener) => listener(payload));
+    }
+    removeAllListeners() {
+        this.listeners.clear();
+    }
+}
+exports.TypedEventEmitter = TypedEventEmitter;

package/dist-cjs/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasWaveformVisualizer = exports.CanvasSpectrumVisualizer = exports.CanvasRadialVisualizer = exports.mountStandardPlayerUI = exports.SmoothPlayer = void 0;
+var SmoothPlayer_js_1 = require("./SmoothPlayer.js");
+Object.defineProperty(exports, "SmoothPlayer", { enumerable: true, get: function () { return SmoothPlayer_js_1.SmoothPlayer; } });
+var ui_js_1 = require("./ui.js");
+Object.defineProperty(exports, "mountStandardPlayerUI", { enumerable: true, get: function () { return ui_js_1.mountStandardPlayerUI; } });
+var visualizers_js_1 = require("./visualizers.js");
+Object.defineProperty(exports, "CanvasRadialVisualizer", { enumerable: true, get: function () { return visualizers_js_1.CanvasRadialVisualizer; } });
+Object.defineProperty(exports, "CanvasSpectrumVisualizer", { enumerable: true, get: function () { return visualizers_js_1.CanvasSpectrumVisualizer; } });
+Object.defineProperty(exports, "CanvasWaveformVisualizer", { enumerable: true, get: function () { return visualizers_js_1.CanvasWaveformVisualizer; } });

package/dist-cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist-cjs/ui.js

@@ -0,0 +1,122 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mountStandardPlayerUI = mountStandardPlayerUI;
+const visualizers_js_1 = require("./visualizers.js");
+function requiredElement(scope, selector) {
+    const element = scope.querySelector(selector);
+    if (!element) {
+        throw new Error(`Missing required element: ${selector}`);
+    }
+    return element;
+}
+function mountStandardPlayerUI(player, root, options = {}) {
+    const doc = root.ownerDocument ?? document;
+    const debugEnabled = options.debugEnabled ?? player.getDebug();
+    const title = requiredElement(root, "#title");
+    const artist = requiredElement(root, "#artist");
+    const playlistTitle = requiredElement(root, ".smooth-player__top-title");
+    const progress = requiredElement(root, "#progress");
+    const timeCurrent = requiredElement(root, "#time-current");
+    const timeDuration = requiredElement(root, "#time-duration");
+    const playButton = requiredElement(root, "#play");
+    const playText = requiredElement(root, "#play-text");
+    const prevButton = requiredElement(root, "#prev");
+    const nextButton = requiredElement(root, "#next");
+    const playlistToggle = requiredElement(root, "#playlist-toggle");
+    const shuffleToggle = requiredElement(root, "#shuffle-toggle");
+    const shuffleText = requiredElement(root, "#shuffle-text");
+    const playlistPanel = requiredElement(root, "#playlist-panel");
+    const playlistHead = requiredElement(root, ".smooth-player__playlist-head");
+    const playlistClose = requiredElement(root, "#playlist-close");
+    const playlistList = requiredElement(root, "#playlist-list");
+    const radialCanvas = requiredElement(root, "#radial-visualizer");
+    const progressRing = requiredElement(root, "#progress-ring");
+    const unmounts = [];
+    let radial = null;
+    const rebuildVisualizer = () => {
+        radial?.stop();
+        const mode = player.getVisualizer();
+        radialCanvas.hidden = mode === "none";
+        if (mode === "none") {
+            radial = null;
+            return;
+        }
+        radial = new visualizers_js_1.CanvasRadialVisualizer(radialCanvas, player, {
+            mode,
+            color: player.getAccentColor(),
+            background: "transparent",
+        });
+        radial.start();
+    };
+    const playlistPanelController = player.mountPlaylistPanel({
+        root,
+        toggleButton: playlistToggle,
+        panel: playlistPanel,
+        closeButton: playlistClose,
+    });
+    unmounts.push(() => playlistPanelController.destroy());
+    unmounts.push(player.mountPlaylistTitle(playlistTitle));
+    unmounts.push(player.mountShuffleToggle({
+        button: shuffleToggle,
+        labelElement: shuffleText,
+        initialEnabled: false,
+    }));
+    unmounts.push(player.mountTransportControls({
+        previousButton: prevButton,
+        nextButton: nextButton,
+    }));
+    if (debugEnabled) {
+        const debugPanel = requiredElement(doc, "#debug-panel");
+        const dbgSrc = requiredElement(doc, "#dbg-src");
+        const dbgCurrentTime = requiredElement(doc, "#dbg-current-time");
+        const dbgDuration = requiredElement(doc, "#dbg-duration");
+        const dbgReadyState = requiredElement(doc, "#dbg-ready-state");
+        const dbgNetworkState = requiredElement(doc, "#dbg-network-state");
+        const dbgPaused = requiredElement(doc, "#dbg-paused");
+        const dbgEvents = requiredElement(doc, "#dbg-events");
+        unmounts.push(player.mountDebugPanel({
+            enabled: true,
+            panel: debugPanel,
+            sourceElement: dbgSrc,
+            currentTimeElement: dbgCurrentTime,
+            durationElement: dbgDuration,
+            readyStateElement: dbgReadyState,
+            networkStateElement: dbgNetworkState,
+            pausedElement: dbgPaused,
+            eventsElement: dbgEvents,
+        }));
+    }
+    player.applyAccentColor(root);
+    unmounts.push(player.mountTrackInfo(title, artist));
+    unmounts.push(player.mountPlayButton(playButton, {
+        labelElement: playText,
+        playLabel: "Riproduci",
+        pauseLabel: "Pausa",
+    }));
+    unmounts.push(player.mountProgress({
+        range: progress,
+        currentTimeElement: timeCurrent,
+        durationElement: timeDuration,
+        progressRoot: root,
+        ringElement: progressRing,
+    }));
+    unmounts.push(player.mountPlaylist(playlistList, {
+        onSelect: () => playlistPanelController.setOpen(false),
+    }));
+    const switcher = doc.createElement("div");
+    switcher.className = "smooth-player__playlist-switcher";
+    playlistHead.insertAdjacentElement("afterend", switcher);
+    unmounts.push(player.mountPlaylistSwitcher(switcher));
+    rebuildVisualizer();
+    return {
+        rebuildVisualizer,
+        destroy: () => {
+            radial?.stop();
+            radial = null;
+            for (const unmount of unmounts) {
+                unmount();
+            }
+            switcher.remove();
+        },
+    };
+}

package/dist-cjs/visualizers.js

@@ -0,0 +1,188 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CanvasRadialVisualizer = exports.CanvasWaveformVisualizer = exports.CanvasSpectrumVisualizer = void 0;
+class CanvasVisualizer {
+    constructor(canvas, player) {
+        this.canvas = canvas;
+        this.player = player;
+        this.frameId = 0;
+    }
+    start() {
+        this.stop();
+        this.draw();
+    }
+    stop() {
+        cancelAnimationFrame(this.frameId);
+    }
+}
+class CanvasSpectrumVisualizer extends CanvasVisualizer {
+    constructor(canvas, player, options = {}) {
+        super(canvas, player);
+        this.options = {
+            width: options.width ?? canvas.width ?? 640,
+            height: options.height ?? canvas.height ?? 160,
+            background: options.background ?? "#0b1220",
+            color: options.color ?? "#2db6c8",
+            barGap: options.barGap ?? 1,
+            barWidth: options.barWidth ?? 3,
+        };
+        this.canvas.width = this.options.width;
+        this.canvas.height = this.options.height;
+    }
+    draw() {
+        const ctx = this.canvas.getContext("2d");
+        if (!ctx)
+            return;
+        const data = this.player.getSpectrumData();
+        const { width, height, background, color, barGap, barWidth } = this.options;
+        ctx.fillStyle = background;
+        ctx.fillRect(0, 0, width, height);
+        let x = 0;
+        for (let i = 0; i < data.length && x < width; i += 1) {
+            const value = (data[i] ?? 0) / 255;
+            const barHeight = Math.max(2, value * height);
+            ctx.fillStyle = color;
+            ctx.fillRect(x, height - barHeight, barWidth, barHeight);
+            x += barWidth + barGap;
+        }
+        this.frameId = requestAnimationFrame(() => this.draw());
+    }
+}
+exports.CanvasSpectrumVisualizer = CanvasSpectrumVisualizer;
+class CanvasWaveformVisualizer extends CanvasVisualizer {
+    constructor(canvas, player, options = {}) {
+        super(canvas, player);
+        this.options = {
+            width: options.width ?? canvas.width ?? 640,
+            height: options.height ?? canvas.height ?? 120,
+            background: options.background ?? "#0b1220",
+            color: options.color ?? "#f3f5f9",
+            lineWidth: options.lineWidth ?? 2,
+        };
+        this.canvas.width = this.options.width;
+        this.canvas.height = this.options.height;
+    }
+    draw() {
+        const ctx = this.canvas.getContext("2d");
+        if (!ctx)
+            return;
+        const data = this.player.getWaveformData();
+        const { width, height, background, color, lineWidth } = this.options;
+        ctx.fillStyle = background;
+        ctx.fillRect(0, 0, width, height);
+        ctx.lineWidth = lineWidth;
+        ctx.strokeStyle = color;
+        ctx.beginPath();
+        const sliceWidth = width / data.length;
+        let x = 0;
+        for (let i = 0; i < data.length; i += 1) {
+            const normalized = (data[i] ?? 0) / 128;
+            const y = (normalized * height) / 2;
+            if (i === 0) {
+                ctx.moveTo(x, y);
+            }
+            else {
+                ctx.lineTo(x, y);
+            }
+            x += sliceWidth;
+        }
+        ctx.lineTo(width, height / 2);
+        ctx.stroke();
+        this.frameId = requestAnimationFrame(() => this.draw());
+    }
+}
+exports.CanvasWaveformVisualizer = CanvasWaveformVisualizer;
+class CanvasRadialVisualizer extends CanvasVisualizer {
+    constructor(canvas, player, options = {}) {
+        super(canvas, player);
+        this.options = {
+            width: options.width ?? canvas.width ?? 220,
+            height: options.height ?? canvas.height ?? 220,
+            background: options.background ?? "transparent",
+            color: options.color ?? "#2db6c8",
+            mode: options.mode ?? "spectrum",
+            innerRadiusRatio: options.innerRadiusRatio ?? 0.36,
+            outerRadiusRatio: options.outerRadiusRatio ?? 0.96,
+            lineWidth: options.lineWidth ?? 1.4,
+            waveformAmplitude: options.waveformAmplitude ?? 0.52,
+        };
+        this.canvas.width = this.options.width;
+        this.canvas.height = this.options.height;
+    }
+    draw() {
+        const ctx = this.canvas.getContext("2d");
+        if (!ctx)
+            return;
+        const { width, height, background, color, mode, innerRadiusRatio, outerRadiusRatio, lineWidth, waveformAmplitude } = this.options;
+        const centerX = width / 2;
+        const centerY = height / 2;
+        const maxRadius = Math.min(width, height) / 2;
+        const innerRadius = maxRadius * innerRadiusRatio;
+        const outerRadius = maxRadius * outerRadiusRatio;
+        const radialRange = Math.max(2, outerRadius - innerRadius);
+        if (background === "transparent") {
+            ctx.clearRect(0, 0, width, height);
+        }
+        else {
+            ctx.fillStyle = background;
+            ctx.fillRect(0, 0, width, height);
+        }
+        if (mode === "spectrum") {
+            const data = this.player.getSpectrumData();
+            const sampleCount = Math.min(160, data.length);
+            const step = (Math.PI * 2) / sampleCount;
+            ctx.lineWidth = lineWidth;
+            ctx.strokeStyle = color;
+            ctx.shadowColor = color;
+            ctx.shadowBlur = 8;
+            for (let i = 0; i < sampleCount; i += 1) {
+                const value = (data[i] ?? 0) / 255;
+                const amplitude = Math.max(0.04, value);
+                const angle = i * step - Math.PI / 2;
+                const x0 = centerX + Math.cos(angle) * innerRadius;
+                const y0 = centerY + Math.sin(angle) * innerRadius;
+                const x1 = centerX + Math.cos(angle) * (innerRadius + amplitude * radialRange);
+                const y1 = centerY + Math.sin(angle) * (innerRadius + amplitude * radialRange);
+                ctx.globalAlpha = 0.25 + amplitude * 0.75;
+                ctx.beginPath();
+                ctx.moveTo(x0, y0);
+                ctx.lineTo(x1, y1);
+                ctx.stroke();
+            }
+            ctx.shadowBlur = 0;
+            ctx.globalAlpha = 1;
+            this.frameId = requestAnimationFrame(() => this.draw());
+            return;
+        }
+        const data = this.player.getWaveformData();
+        const sampleCount = Math.min(220, data.length);
+        const step = (Math.PI * 2) / sampleCount;
+        const amplitudeRange = radialRange * waveformAmplitude;
+        const baseRadius = innerRadius + radialRange * 0.5;
+        ctx.lineWidth = lineWidth;
+        ctx.strokeStyle = color;
+        ctx.shadowColor = color;
+        ctx.shadowBlur = 10;
+        ctx.globalAlpha = 0.95;
+        ctx.beginPath();
+        for (let i = 0; i < sampleCount; i += 1) {
+            const normalized = ((data[i] ?? 128) - 128) / 128;
+            const r = baseRadius + normalized * amplitudeRange;
+            const angle = i * step - Math.PI / 2;
+            const x = centerX + Math.cos(angle) * r;
+            const y = centerY + Math.sin(angle) * r;
+            if (i === 0) {
+                ctx.moveTo(x, y);
+            }
+            else {
+                ctx.lineTo(x, y);
+            }
+        }
+        ctx.closePath();
+        ctx.stroke();
+        ctx.shadowBlur = 0;
+        ctx.globalAlpha = 1;
+        this.frameId = requestAnimationFrame(() => this.draw());
+    }
+}
+exports.CanvasRadialVisualizer = CanvasRadialVisualizer;

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "smooth-player",
+  "version": "1.0.0",
+  "description": "Typed audio player with spectrum and waveform analyzers",
+  "type": "module",
+  "workspaces": [
+    "packages/*"
+  ],
+  "main": "./dist-cjs/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist-cjs/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "dist-cjs",
+    "styles",
+    "assets"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist dist-cjs",
+    "build:esm": "tsc -p tsconfig.build.esm.json",
+    "build:cjs": "tsc -p tsconfig.build.cjs.json",
+    "build:types": "tsc -p tsconfig.build.json",
+    "build:css": "sass --no-source-map styles/index.scss dist/smooth-player.css",
+    "build": "npm run clean && npm run build:esm && npm run build:cjs && npm run build:types && npm run build:css",
+    "dev": "tsc -p tsconfig.build.esm.json --watch",
+    "typecheck": "tsc --noEmit",
+    "demo": "npm run build && node scripts/demo-server.mjs",
+    "workspaces:build": "npm run -ws --if-present build",
+    "workspaces:typecheck": "npm run -ws --if-present typecheck"
+  },
+  "keywords": [
+    "audio-player",
+    "typescript",
+    "spectrum-analyzer",
+    "waveform",
+    "web-audio"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "sass": "^1.93.2",
+    "typescript": "^5.7.3"
+  }
+}