CanvasJS Real-Time Audio Visualization with Hearing Damage Alert

Yashas Gowda — Tue, 18 Mar 2025 13:09:17 +0000

In the multimedia era, understanding and visualizing audio data has become increasingly valuable—whether you're a musician tweaking a mix, a developer building an interactive app, or just someone curious about the soundscape around you. Today, we’re diving into a neat project that combines the Web Audio API with CanvasJS to create a real-time frequency analyzer, complete with a hearing damage alert.

What’s the Project About?

Imagine a webpage with three sleek column charts: one for bass frequencies (0-200 Hz), another for mids (200-2000 Hz), and a third for treble (2000 Hz and up). These charts update in real-time as your microphone picks up sound, giving you a visual breakdown of the audio spectrum. If the sound gets too loud—say, approaching levels that could harm your hearing—a warning pops up, and the charts turn red.

Breaking Down the Code

Let’s walk through how this audio analyzer comes to life.

Initializing the Charts

In JavaScript, we create three CanvasJS charts, each targeting one of the div containers. Each chart is configured with a column type to display frequency bins as vertical bars, a light2 theme for a crisp look, and sensible axis labels. The dataPoints arrays (one for each range) will hold the amplitude values we’ll update in real-time. Below is the initialization of one of the three charts.

charts.push(new CanvasJS.Chart("bassChart", {
  theme: 'light2',
  title: { text: "Bass Frequencies (0-200 Hz)" },
  axisX: { title: "Bin" },
  axisY: { title: "Amplitude", maximum: 255 },
  data: [{ type: "column", dataPoints: dataPointsBass }]
}));

This setup is repeated for the mid and treble charts, with adjusted titles.

Capturing Audio

The startAudio function uses the Web Audio API to access the user’s microphone. Once the stream is captured, an AnalyserNode is created with an fftSize of 128, giving us 64 frequency bins to work with. It is with these frequency bins we are able to represent the captured sound across the three different frequency ranges; bass, mid, and treble.

async function startAudio() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const source = audioContext.createMediaStreamSource(stream);

  analyser = audioContext.createAnalyser();
  analyser.fftSize = 128; // 64 bins
  source.connect(analyser);

  updateCharts();
}

Updating the Charts

The updateCharts function is where the magic happens. It grabs frequency data from the analyzer as a Uint8Array, splits it into bass, mid, and treble ranges (roughly 21 bins each), and pushes the values into the respective dataPoints arrays.

To add a safety feature, we estimate decibel (dB) levels from the maximum amplitude. If it exceeds a threshold (set at 90 dB here, a conservative flag), the alert becomes visible, and the charts turn red—a visual cue powered by CanvasJS’s dynamic styling options.

const dB = 20 * Math.log10(maxAmplitude / 255 * 1000) + 20;
if (dB > DB_THRESHOLD) {
  alertElement.style.display = "block";
  charts.forEach(chart => chart.options.data[0].color = "red");
} else {
  alertElement.style.display = "none";
  charts.forEach(chart => chart.options.data[0].color = null);
}

The requestAnimationFrame call keeps the loop running, ensuring the charts reflect the audio in real-time.

Closing Thoughts

The complete code is available in this Codepen URL.
And that’s a wrap! With a few lines of code, we’ve built a live frequency analyzer that not only looks cool but also watches out for your ears.

Create an Animated Pie Chart in Less Than 20 Lines of Code!

Yashas Gowda — Fri, 20 Sep 2024 12:43:41 +0000

Keep It Super Simple!
When it comes to data visualization, clarity and simplicity are crucial. A well-crafted chart can convey important insights without overwhelming your audience with numbers and decimals. Let's embrace simplicity and create an animation-rich pie chart using CanvasJS, all in less than 20 lines of code.

Copy and paste the code below into an HTML file and open it in a modern browser. For legacy browsers, please use the code on this page. For a straightforward API explanation, scroll down!

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Pie Chart</title>
    <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 370px; width: 100%;"></div>
    <script>
        window.onload = () => {
            const chart = new CanvasJS.Chart("chartContainer", {
                theme: "light2", // "light1", "light2", "dark1", "dark2"
                animationEnabled: true,
                title: {
                    text: "Desktop Browser Market Share in 2024"
                },
                data: [{
                    type: "pie",
                    indexLabel: "{label}: {y}%",
                    dataPoints: [
                        { y: 67.15, label: "Chrome" },
                        { y: 15.47, label: "Edge" },
                        { y: 7.89, label: "Safari" },
                        { y: 5.81, label: "Firefox" },
                        { y: 2.24, label: "Opera" },
                        { y: 1.44, label: "Others" }
                    ]
                }]
            });
            chart.render();
        };
    </script>
</body>
</html>

Breakdown of the Code

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
First and foremost, we load the CanvasJS library via CDN.
window.onload = () => { ... };
This line sets up an event handler that runs the enclosed code when the window (webpage) has finished loading. It ensures that all elements are available before the script executes.
const chart = new CanvasJS.Chart("chartContainer", { ... });
Here, we create a new chart instance. The "chartContainer" is the ID of the HTML element where the chart will be rendered.

Chart Configuration Object:

Inside the parentheses, we pass an object that configures the chart. This object includes several properties:

theme: "light2": Sets the color theme of the chart. There are options like "light1", "light2", "dark1", and "dark2".
animationEnabled: true: Enables animations when the chart is rendered, making it visually engaging.
title: { text: "Desktop Browser Market Share in 2024" }: Defines the title of the chart, displayed at the top.
data: [{ ... }]: This array contains the data for the chart. Each object inside it represents a dataset. In this case, it’s a pie chart.

Pie Chart Configuration:

Inside the data array, we define:

type: "pie": Specifies that we are creating a pie chart.
indexLabel: "{label}: {y}%": Displays the label of each segment followed by its percentage, providing a clear representation of the data directly on the chart.
dataPoints: [ ... ]: An array of objects that represent the individual segments of the pie chart.

Each object has:

y: The percentage value for that segment.
label: The name of the segment (e.g., "Chrome").

Rendering the Chart:

chart.render();: This line finally draws the chart on the screen using the specified configuration.

Data source: SimilarWeb

DEV Community: Yashas Gowda