---
title: "Audio Vizualizer"
date: "2018-09-14T00:00:00+00:00"
tags: ["audio","CSS","HTML5","WebAudioAPI"]
project: "War of the Worlds Broadcast"
---

# Audio Vizualizer

Source: https://greenzeta.com/update/audio-vizualizer/
Last updated: 2026-01-09T00:45:44+00:00

Project: [War of the Worlds Broadcast](https://greenzeta.com/project/war-of-the-worlds-broadcast/)

The pulsing radio light is a feature I always wanted in War of the Worlds Broadcast but never had a way to pull it off. That is until I found [this article](https://developers.google.com/web/updates/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs), which explains that you can pipe the output from an \#html5 \#audio element into the \#WebAudioAPI. That allowed me to measure the decibel output of the stream and apply it to a \#css scale() property.