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 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 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;} // 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

Shell

yarn add howler

Shell

yarn add express
yarn add -D typescript ts-node @types/node @types/express

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;
}

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 };

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;
  }
}

TypeScript

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

TypeScript

document.getElementById('playHowlerBtn').addEventListener('click', () => handlePlayback('play'));
document.getElementById('pauseHowlerBtn').addEventListener('click', () => handlePlayback('pause'));
document.getElementById('stopHowlerBtn').addEventListener('click', () => handlePlayback('stop'));

document.getElementById('playHowlerBtn').addEventListener('click', () => handlePlayback('play'));
document.getElementById('pauseHowlerBtn').addEventListener('click', () => handlePlayback('pause'));
document.getElementById('stopHowlerBtn').addEventListener('click', () => handlePlayback('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 };

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;
  }
}

TypeScript

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;
  }
});

TypeScript

document.getElementById('playHowlerBtn').addEventListener('click', () => handlePlayback('play'));
document.getElementById('pauseHowlerBtn').addEventListener('click', () => handlePlayback('pause'));
document.getElementById('stopHowlerBtn').addEventListener('click', () => handlePlayback('stop'));

Backend-Controlled Audio Playback with Howler.js Frontend

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

Why not use Howler.js on the backend?

Project Setup and Dependencies

What You'll Learn

Backend: Controlling Playback State

Join the 1M+ learners on CodeSignal

Backend: Creating the Playback Routes

Frontend: Handling Playback with Howler.js

This combination allows the frontend to maintain accurate control and timing of the playback, which is crucial for later features like segment-based transcription.

Initializing Playback with Howler.js

Hooking Up the Buttons

Summary