avatarConstantin Stan

Summarize

Flutter Web Audio Player Alternative

Playing sounds in a Flutter web application

The famous Compact Cassette

For playing audio on iOS or Android using Flutter, most people will use dedicated packages from the pub.dev repository.

Unfortunately, these are not marked as supported on the web platform.

At the moment of this writing, I couldn’t easily set up audio playback in my web application (although I tried most of the audio-related packages) without using the same technique I used to play video in it.

We’ll explore a solution that enables us to play audio in 3 simple steps:

1. We need to edit the default index.html template file that is located in the web folder. With these edits, we load the Howler audio player and write a JavaScript function that will take care of actually playing our sound.

This is how our index.html will look like:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta content="IE=Edge" http-equiv="X-UA-Compatible">
    <meta name="description" content="Flutter Web Audio Player.">
    <!-- iOS meta tags & icons -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Flutter Web Audio Player">
    <link rel="apple-touch-icon" href="/icons/Icon-192.png">
<title>Flutter Web Audio Player</title>
    <link rel="manifest" href="/manifest.json">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/howler.min.js"></script>
    <script type="application/javascript">
      var audio;
      function playAudio(path) {
        audio= new Howl({
          src: [path]
        });
        audio.play();
      }
    </script>
  </head>
  <body>
    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>

2. We then write a Dart function named playAudio that will call the previously written JS function from the index.html page, using the core dart:js package, and pass on the audio path or URL we want to play:

import 'dart:js' as js;
void playAudio(String path) {
  if(kIsWeb) {
    js.context.callMethod('playAudio', [path]);
  } else {      
    // not on the web so we must use a mobile/desktop library...
  }
}

The code simply calls the playAudio method from the context passing path as parameter.

3.The sound will play instantly. This is useful when we want to add interaction sounds to our actionable UI elements.

playAudio('https://freesound.org/data/previews/147/147597_2173181-lq.mp3');
// or
playAudio('/some/path/to/my/awesome.mp3');

I decided to play a bit and altered the default project we get when we create a Flutter web project for this demo:

The initial clap counter is set to 1986…

The entire project can be found in this GitHub repository and you can clap here.

There are other actions we can do using Howler’s API. It promises and delivers:

  • a simplified API
  • audio sprites
  • spatial audio
  • full codec support (all browser-ready files: MP3, MPEG, OPUS, OGG, OGA, WAV, AAC, CAF, M4A, MP4, WEBA, WEBM, DOLBY, FLAC)
  • works everywhere (including IE9)
  • offers full control
  • auto caching
  • it is modular
  • has zero dependencies (howler.js is as light as 7KB gzipped and has no outside dependencies or plugins)

I say it ticks a lot of boxes and more details can be found on its dedicated page.

As a bottom note, any HTML/JS audio player can be used this way. I chose Howler because I liked its simplicity, power, and the fact that its lightweight (for the above basic functionality you can use only the core library).

Recently I stumbled upon a Dart port of the Howler library:

If you’re interested in also playing video, you can check this out:

Tha(nk|t’)s all!

Flutter
Dart
Programming
Audio
JavaScript
Recommended from ReadMedium