IHSG Spectrum Visualizer

Overview

I have always found something quietly mesmerizing about a stock chart. The IDX Composite, or IHSG, is the single number that millions of Indonesians glance at to feel the mood of the market, and the line that traces its movement carries a strange kind of drama. It rises, it dips, it spikes, and somehow a plain price chart manages to feel alive. One evening, watching that line crawl across a Google Finance page while music played in the background, a small idea refused to leave me alone. What if the chart did not just sit there? What if it could move to the music? What if the market's heartbeat and the rhythm of a song could share the same screen?

That idea became IHSG Spectrum Visualizer, a small experiment that reimagines an ordinary stock quote page as something closer to audio-reactive art. At first glance it looks exactly like a familiar finance page: the IHSG headline price, the change for the day, a clean chart, and the usual time ranges. But the moment you press play, the page wakes up. The price chart stops being a static line and becomes a live audio spectrum, pulsing with the music, while the big headline number snaps and sings along to the melody. When the music stops, everything settles back into a perfectly still, honest chart of real prices. You can try it live at ihsg.membasuh.com.

What I love most about it is the tension between two very different worlds. On one side there is the serious, factual world of market data, where every number has to be correct. On the other there is the playful, expressive world of sound and motion, where the only goal is to feel something. This project is my attempt to let those two worlds meet on a single page, without either one pretending to be the other.

Why IHSG Spectrum Visualizer?

Financial dashboards are usually built to inform, and they do that job well. But they almost never try to make you feel the market, and they certainly never try to entertain you. That gap is exactly where this project lives. It is not meant to replace a trading terminal or to give you an edge on the next trade. It is meant to take something everyone recognizes, a stock index quote, and turn it into an experience worth pausing for.

There were a few specific things I wanted to get right, and each one shaped the project:

  • The chart should stay honest. It would have been easy to fake a pretty animation that had nothing to do with real prices. I did not want that. When no music is playing, the chart is completely still and shows the genuine IHSG price for the selected range. The visualization is layered on top of real data, never in place of it.
  • The audio should drive everything, in real time. The spectrum and the singing headline are not pre-baked loops. They respond, frame by frame, to whatever audio is actually playing, whether that is a library track, a file from your device, or a YouTube link.
  • It should feel like a place you already know. The layout deliberately echoes a Google-Finance-style quote page, with the same kind of headline, change indicator, and time ranges, so the surprise of the spectrum lands harder against a familiar backdrop.
  • It should be shareable. A beautiful moment on screen is wasted if you cannot keep it. So the app can export the current view as a ready-to-post Instagram Story image, turning a fleeting animation into something you can send to a friend.

In short, the project exists to answer a question that has nothing to do with finance and everything to do with delight: what does the market look like when it dances?

How Does It Work?

Under the calm surface, the app is doing two jobs at once. It is behaving like a faithful finance page, and it is behaving like a real-time audio visualizer, and it has to keep both honest at the same time.

The data side comes first. A single Cloudflare Worker sits in front of everything and fetches live quote data from the Yahoo Finance v8 API, along with related headlines from Google News RSS. That Worker also serves the built front-end through Cloudflare Assets, so the whole thing runs as one lightweight unit at the edge, close to wherever you happen to open it. The page offers eight time ranges, 1D, 5D, 1M, 6M, YTD, 1Y, 5Y, and Max, with baselines aligned to the way Google Finance frames the same numbers, so the chart you read matches the reference you already trust.

The audio side is where the magic happens. When you start playing a track, the app routes the sound through the browser's Web Audio API, using an AnalyserNode to pull out the live frequency data many times per second. That stream of frequencies is what the spectrum is drawn from. The price line you were looking at is re-expressed as bands of audio energy, so the chart literally is the price data rendered as a spectrum, rising and falling with the music instead of with the passage of time. The instant the music stops, that analysis stops too, and the chart returns to its quiet, factual self.

The headline number gets its own special treatment. Rather than just bouncing randomly, the big IHSG price reacts to detected musical onsets, the little moments where a beat or a note clearly begins. For library tracks and uploaded files, the app runs real spectral-flux analysis, a technique that watches for sudden increases in spectral energy to find where the music actually hits. For YouTube sources, where direct access to the raw audio is restricted by the browser for cross-origin reasons, the app falls back to a synthetic beat so the headline still moves convincingly in time. Either way, the effect is the same from your side of the screen: the number feels like it is singing.

Key Functionalities

  1. Live Spectrum Chart: The price chart doubles as a real-time audio spectrum. When music plays, the line pulses with the frequencies of the sound; when it stops, it falls perfectly still and shows the true IHSG price for the selected range.
  2. Five Spectrum Models: Choose from five distinct visual modes, BASS, MID, FULL, WAVE, and MAX, each emphasizing a different part of the frequency range so you can tune the look to the track and the mood.
  3. A Headline That Sings: The large price number snaps to detected musical onsets using genuine spectral-flux analysis for files and library tracks, with a synthetic beat for YouTube, so the headline appears to sing the melody.
  4. Three Ways to Bring Audio: Play from a built-in library, upload a track straight from your device, or paste a YouTube link. The visualization adapts to whichever source you choose.
  5. Instagram Story Export: Capture the current view as a crisp 1080×1920 PNG, perfectly sized for an Instagram Story, so a great-looking moment becomes something you can share instantly.
  6. Familiar, Localized, Installable: A Google-Finance-style layout with light and dark themes that follow your device preference, full Indonesian and English support, and complete PWA capabilities so you can install it like a native app and use it offline.

The Audio Engine, and Why It Matters

The heart of this project is not the finance data, which is well-trodden ground, but the small audio engine that makes the page come alive. I spent most of my time here, because this is where a clever idea either feels real or feels fake, and the difference is entirely in the details.

The browser's Web Audio API is doing the heavy lifting. By tapping an AnalyserNode into the playing audio, the app gets a fresh snapshot of the sound's frequency content on every animation frame. Translating that raw stream into something that reads as a price chart having a good time, rather than a generic equalizer, is what the five spectrum models are for. Each model decides which frequencies matter most and how they map onto the chart, so the same song can look thunderous in BASS, delicate in WAVE, or completely unhinged in MAX.

The singing headline deserves a special mention, because it is the detail people notice first. Onset detection through spectral flux is a genuinely nice piece of audio engineering: instead of reacting to volume, it reacts to change, watching for the sudden rises in spectral energy that mark the start of a beat or a note. That is why the number feels musical rather than twitchy. It moves when the music moves. The honest limitation is YouTube, where browsers deliberately wall off the raw audio of cross-origin media for security reasons. Rather than break the experience there, the app generates a synthetic beat that keeps the headline alive in spirit. I think being upfront about that tradeoff matters more than pretending it does not exist.

One deliberate choice sits underneath all of this: no audio ships with the project. The public/audio/ folder is intentionally git-ignored, and anyone running the app provides their own legally obtained MP3s, with the library list generated automatically from each file's ID3 tags. Device uploads and YouTube links need nothing bundled at all. It keeps the repository clean, sidesteps music licensing entirely, and leaves the responsibility for copyright exactly where it belongs, with the person choosing the songs.

Tech Stack

The project is built using the following tools and frameworks:

Notably, the stack intentionally avoids state-management libraries, CSS frameworks, and database servers. Styling is hand-written CSS with custom properties, and an optional Cloudflare KV namespace can add short-TTL caching; without it, the app simply serves live data on every request.

Real-World Use Cases

This is unapologetically a fun project, but fun has real uses. A few moments where it earns its place:

  • Social content for finance creators: Anyone posting about the IHSG on Instagram or TikTok can turn a dry daily-close update into an eye-catching, music-driven clip, then export a Story-ready image in one tap.
  • Event and stream backdrops: A live, audio-reactive market visual makes a striking ambient screen for a meetup, a launch, a trading-community stream, or any space where the market is the theme.
  • A teaching aid for the Web Audio API: For developers learning real-time audio, the project is a compact, readable example of frequency analysis, spectral-flux onset detection, and the practical limits of cross-origin audio.
  • A conversation starter about data and art: It is a small, concrete answer to a big question (how far can you push a familiar interface before it becomes something else?), and a nice prompt for anyone interested in creative coding.
  • Just a moment of delight: Sometimes you open it, play a favorite song, watch the market dance, and that is the entire point.

Benefits

For Curious Users and Creators

  • Instantly familiar, instantly surprising: The page looks like a stock quote you already know, so the spectrum and the singing headline land as a genuine, delightful surprise.
  • Bring your own soundtrack: Library tracks, device uploads, and YouTube links all work, so any song you love can drive the visuals.
  • Made to be shared: One-tap Instagram Story export turns a fleeting on-screen moment into a polished image you can post immediately.
  • Comfortable and accessible: Light and dark themes follow your device, the interface speaks both Indonesian and English, and PWA support lets you install it and use it offline.

For Developers

  • A clean, dependency-light codebase: Built on React, TypeScript, and Vite with no state-management library, no CSS framework, and no database, it is small enough to read in an afternoon and understand fully.
  • Real audio engineering to learn from: The Web Audio API integration, the five spectrum models, and the spectral-flux onset detection are practical references for anyone building real-time audio features.
  • Edge-native and simple to run: A single Cloudflare Worker fetches the data and serves the app, with an optional KV cache, so the whole architecture stays easy to reason about and cheap to host.
  • Open and honest by design: The source is MIT-licensed, the audio-licensing responsibility is cleanly separated out, and the tradeoffs (like the YouTube synthetic beat) are documented rather than hidden.

How to Get Started

The fastest way to experience it is simply to open ihsg.membasuh.com, play a track, and watch the chart come to life. If you would rather run it yourself, study the code, or deploy your own instance, getting started locally is straightforward:

  1. Clone the Repository

    Start by cloning the project from GitHub:

    git clone git@github.com:fyvri/ihsg-spectrum-visualizer.git && cd ihsg-spectrum-visualizer

  2. Install Dependencies

    Install everything the project needs:

    npm install

  3. Set Up Your Environment

    Copy the example environment file and adjust the public branding values to your liking:

    cp .env.example .env.local

    The variables are VITE_BRAND_NAME, VITE_BRAND_URL, and VITE_SITE_URL, the last of which is printed on exported images. To use the built-in library, drop your own legally obtained MP3s into public/audio/; their ID3 tags build the track list automatically.

  4. Run the Application

    Launch the front-end and the Worker together:

    npm run dev

Then open the local URL Vite prints, play some music, and watch the IHSG chart turn into a living spectrum. When you are ready to put it online, build and deploy to Cloudflare in two commands, npm run build followed by npx wrangler deploy, and your own edge-hosted instance is live.

Join the Community

IHSG Spectrum Visualizer is a small project with a simple wish behind it: to make a familiar thing feel new for a moment. Whether you are a creator looking for a fresh way to talk about the market, a developer curious about real-time audio on the web, or just someone who wants to watch the IHSG dance to a favorite song, there is something here for you. The project is open source, and that openness is an invitation. New spectrum models, better onset detection, extra data ranges, and any other ideas are all welcome, and every contribution makes the experience a little more alive for the next person.

Dive into the GitHub repository, try it out at ihsg.membasuh.com, and feel free to open an issue or a pull request.

Final Thoughts

We are surrounded by data that is technically accurate and emotionally flat. The IHSG is exactly that kind of number: important, watched, and yet somehow lifeless on the page. This project started as a small refusal to accept that, a simple wish to see the market move to music instead of just sitting still. It will not help you trade, and it was never meant to. What it does, I hope, is make you smile, and remind you that even the most serious data can be made to play. Open it, press play, and let the market sing.

Comments