Backend-Controlled Audio Playback with Howler.js Frontend

Welcome to the first lesson of our course on audio processing and transcription using Howler.js, TypeScript, and OpenAI Whisper . This lesson lays the groundwork by building a system where users can select an audio file, play it, pause it, or stop it—using backend-controlled logic and frontend audio playback powered by Howler.js .

What is Howler.js, and Why Do We Use It?

Howler.js is a JavaScript audio library that simplifies working with sound in the browser. It supports powerful features like streaming, cross-browser playback, controlling volume, tracking playback position, and more.

Why not use Howler.js on the backend?

The backend doesn’t have access to the browser’s audio system or hardware. It cannot play or pause actual audio because: Node.js runs on the server (not the user’s machine). There is no audio output device available to “play” sound. Instead, the backend only tracks playback intent—like which file the user wants to play—while the frontend (in the browser) uses Howler.js to play the audio. Backend = Playback state manager Frontend = Actual audio player

Project Setup and Dependencies

We’ll use Howler.js in the frontend,. Locally, you can install it using: Shell yarn add howler Also make sure that you've installed the required packages for the backend, including TypeScript and Express: Shell yarn add express yarn add -D typescript ts-node @types/node @types/express

What You'll Learn

By the end of this lesson, you'll be able to: Serve audio files and playback routes from a TypeScript backend. Use Howler.js to control audio playback in the browser. Sync backend playback state with frontend playback logic.

Backend: Controlling Playback State

We'll use a simple TypeScript module to store which audio file is currently selected. TypeScript // src/services/audioController.ts let currentAudioPath: string | null = null; export function setCurrentAudio(path: string): void {currentAudioPath = path;} export function getCurrentAudio(): string | null {return currentAudioPath;} export function clearCurrentAudio(): void {currentAudioPath = null;} This file acts like a tiny in-memory database: setCurrentAudio() tells the backend which file is being played. getCurrentAudio() lets us fetch the current selection. clearCurrentAudio() resets everything when audio stops.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Backend: Creating the Playback Routes

Next, we define the routes that frontend will call when the user presses Play, Pause, or Stop.

TypeScript

// src/routes/audio.ts
import { Router } from 'express';
import { setCurrentAudio, getCurrentAudio, clearCurrentAudio } from '../services/audioController';

const router = Router();

router.post('/play', (req, res) => {
  const { filePath } = req.body;
  if (!filePath) return res.status(400).json({ error: 'No filePath provided' });

  setCurrentAudio(filePath);
  res.json({ status: 'Playback started', path: filePath });
});

router.post('/pause', (_, res) => res.json({ status: 'Playback paused' }));

router.post('/stop', (_, res) => {
  clearCurrentAudio();
  res.json({ status: 'Playback stopped' });
});

router.get('/current', (_, res) => {
  const path = getCurrentAudio();
  if (!path) return res.status(404).json({ error: 'No audio currently selected' });
  res.json({ path });
});

export { router as audioRoute };

// src/routes/audio.ts
import { Router } from 'express';
import { setCurrentAudio, getCurrentAudio, clearCurrentAudio } from '../services/audioController';

const router = Router();

router.post('/play', (req, res) => {
  const { filePath } = req.body;
  if (!filePath) return res.status(400).json({ error: 'No filePath provided' });

  setCurrentAudio(filePath);
  res.json({ status: 'Playback started', path: filePath });
});

router.post('/pause', (_, res) => res.json({ status: 'Playback paused' }));

router.post('/stop', (_, res) => {
  clearCurrentAudio();
  res.json({ status: 'Playback stopped' });
});

router.get('/current', (_, res) => {
  const path = getCurrentAudio();
  if (!path) return res.status(404).json({ error: 'No audio currently selected' });
  res.json({ path });
});

export { router as audioRoute };

These routes allow the browser to:

Start playback (/play)
Pause audio (/pause)
Stop and clear the current file (/stop)
Get the currently selected audio (/current)

The actual sound isn’t played here—this just manages state.

Frontend: Handling Playback with Howler.js

Now let’s look at the core of the playback logic. This happens in the browser, inside public/app.js.

Here’s the handlePlayback() function that gets triggered when the user clicks Play, Pause, or Stop.

TypeScript

async function handlePlayback(action) {
  const filePath = document.getElementById('audioFile').value;

  await fetch(`/audio/${action}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: action === 'play' ? JSON.stringify({ filePath }) : undefined
  });

  if (action === 'play') {
    if (currentSound && isPaused) {
      currentSound.play();
    } else {
      if (currentSound) currentSound.stop();

      currentSound = new Howl({
        src: [`/${filePath}`],
        html5: true,
        onplay: () => {
          trackingInterval = setInterval(() => {
            if (currentSound) lastKnownPosition = currentSound.seek();
          }, 200);
        },
        onend: () => {
          clearInterval(trackingInterval);
          trackingInterval = null;
          isPlaying = false;
          isPaused = false;
        }
      });

      currentSound.play();
    }

    isPlaying = true;
    isPaused = false;
  } else if (action === 'pause' && currentSound) {
    currentSound.pause();
    clearInterval(trackingInterval);
    trackingInterval = null;
    isPaused = true;
    isPlaying = false;
  } else if (action === 'stop' && currentSound) {
    currentSound.stop();
    clearInterval(trackingInterval);
    trackingInterval = null;
    currentSound = null;
    isPlaying = false;
    isPaused = false;
  }
}

async function handlePlayback(action) {
  const filePath = document.getElementById('audioFile').value;

  await fetch(`/audio/${action}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: action === 'play' ? JSON.stringify({ filePath }) : undefined
  });

  if (action === 'play') {
    if (currentSound && isPaused) {
      currentSound.play();
    } else {
      if (currentSound) currentSound.stop();

      currentSound = new Howl({
        src: [`/${filePath}`],
        html5: true,
        onplay: () => {
          trackingInterval = setInterval(() => {
            if (currentSound) lastKnownPosition = currentSound.seek();
          }, 200);
        },
        onend: () => {
          clearInterval(trackingInterval);
          trackingInterval = null;
          isPlaying = false;
          isPaused = false;
        }
      });

      currentSound.play();
    }

    isPlaying = true;
    isPaused = false;
  } else if (action === 'pause' && currentSound) {
    currentSound.pause();
    clearInterval(trackingInterval);
    trackingInterval = null;
    isPaused = true;
    isPlaying = false;
  } else if (action === 'stop' && currentSound) {
    currentSound.stop();
    clearInterval(trackingInterval);
    trackingInterval = null;
    currentSound = null;
    isPlaying = false;
    isPaused = false;
  }
}

The handlePlayback function is responsible for syncing user actions (like play, pause, or stop) with both the backend and the Howler.js audio player in the browser.

When a user clicks one of the control buttons, the function first sends a request to the appropriate backend route (/play, /pause, or /stop) to update the playback state. Then, it uses Howler.js to handle the actual audio playback in the browser.

If the user chooses to play an audio file, a new Howl instance is created with the selected file path. The html5: true setting ensures that large audio files are streamed efficiently. The onplay callback starts a timer that tracks the current position of the audio in real time using seek(), while the onend callback cleans up that timer and resets playback flags when the audio finishes.