Get started with spectragram CDN

MIT licensed

Spectrogram.js is a lightweight library for generating real-time or static spectrograms from audio data.

Tags:
  • jquery-plugin
  • ecosystem:jquery
  • gallery
  • instagram
  • photos
  • spectragram

Stable version

Copied!

How to start using spectragram CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with spectragram CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/spectre.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/spectre.min.js"></script>
    <script src="https://cdn.cdnhub.io/spectragram/2.0.0/spectragram.min.js"></script>
    <style>
        #canvas-container {
            width: 100%;
            height: 400px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="canvas-container">
        <canvas id="spectrogram-canvas" width="400" height="200"></canvas>
    </div>

    <script>
        const canvas = document.getElementById('spectrogram-canvas');
        const ctx = canvas.getContext('2d');

        navigator.mediaDevices.getUserMedia({ audio: true })
            .then(stream => {
                const analyser = new AnalyserNode(ctx.createMediaStreamSource(stream).context.createMediaStreamDestination(new MediaStream()).stream);
                const bufferLength = analyser.frequencyBinCount;

                const dataArray = new Uint8Array(bufferLength);

                const spectrogram = new Spectrogram(ctx, analyser, {
                    width: canvas.width,
                    height: canvas.height,
                    binSize: 256,
                    smoothingTimeConstant: 0.3,
                    threshold: -60
                });

                function render() {
                    requestAnimationFrame(render);
                    analyser.getByteFrequencyData(dataArray);
                    spectrogram.render(dataArray);
                }

                render();
            })
            .catch(error => {
                console.error('Error accessing media devices.', error);
            });
    </script>
</body>
</html>
Copied!
Copied!

All versions