Playing short audio clips in Flutter with Just Audio

Suragch
Suragch
Apr 23 · 5 min read

There are a million variables when talking about playing audio in a Flutter app, so this tutorial will seek to limit the scope to one basic task: playing short audio clips. Short audio clips don’t require a background service, setting a playlist, seeking to some position, buffering, or adjusting playback speed. That makes this an ideal topic for your first audio tutorial in Flutter.

There are a number of audio packages on Pub, but this tutorial will be using Just Audio. It supports Android, iOS, web, and macOS, and there is work being done on Windows and Linux.

Short audio clips are used in many types of apps. Here are a few examples:

  • Game sounds
  • Button click sounds
  • Language learning app
  • Dictionary with recorded audio

These sounds are all likely to be just a few seconds long at the most. You can also use Just Audio to play longer media items like songs and podcasts, but this tutorial won’t cover that today.

Follow along step by step to get the most out of this lesson.

Setup

Create a new Flutter project and replace main.dart with the following layout:

Run that and you should see the following:

The goal is to play a cow sound when you press the Cow button and a horse sound when you press the Horse button. If you press them now, though, they won’t do anything. That’s because the onPressed callbacks are currently empty.

Open pubspec.yaml and make sure the minimum Dart SDK environment version is 2.12.

environment:
sdk: ">=2.12.0 <3.0.0"

Just Audio supports null safety so there’s no reason not to use it.

Also in pubspec.yaml, add the just_audio plugin.

dependencies:
just_audio: ^0.7.4

And get it with

flutter pub get

Then add the import at the top of main.dart:

import 'package:just_audio/just_audio.dart';

Playing audio from assets

Just Audio supports playing audio from assets, files, and URLs. First you’ll play some audio assets.

Create an assets folder in the root of your project and add a subfolder to it called audio.

Now find some audio clips to put in there. Here are some public domain mp3 files:

Name them cow.mp3 and horse.mp3 and add them to the assets/audio folder.

Just like you would do for image assets, you also need to declare your audio assets in pubspec.yaml. Add the following assets location:

flutter:
assets:
- assets/audio/

Now Flutter knows where to find your animal sounds.

At the top of _MyAppState in main.dart, add the following code:

late AudioPlayer player;@override
void initState() {
super.initState();
player = AudioPlayer();
}
@override
void dispose() {
player.dispose();
super.dispose();
}

This initializes AudioPlayer when the UI loads. It will also dispose the audio player and release the resources when the app closes.

Replace the Cow button’s onPressed property with the following code:

onPressed: () async {
await player.setAsset('assets/audio/cow.mp3');
player.play();
},

And the Horse button’s with this:

onPressed: () async {
await player.setAsset('assets/audio/horse.mp3');
player.play();
},

First you wait for the player set the correct audio asset before you play it. The wait isn’t noticeable, though, for short audio clips in the assets bundle.

Restart app and try it out.

It works!

You’ll notice if you quickly press both buttons in succession, though, that the player cuts off the current clip and starts playing the new one.

You’ll solve that problem next.

Playing different audio clips simultaneously

You can play more that one audio source at a time by creating more than one AudioPlayer instance.

Add the following declaration at the top of _MyAppState:

late AudioPlayer player2;

And in initState add this:

player2 = AudioPlayer();

And this in dispose:

player2.dispose();

Now change the Horse button’s onPressed callback so that it uses player2:

onPressed: () async {
await player2.setAsset('assets/audio/horse.mp3');
player2.play();
},

Run the app again to see the difference:

Both audio files overlap each other without clipping.

Playing audio clips from the web

If you have a web app or if there are a large number of sounds that you want to use, you might want to play the audio clips by providing a URL.

In order to do that, just replace setAsset with setUrl:

Cow button

final url = 'https://www.applesaucekids.com/sound%20effects/moo.mp3';
await player.setUrl(url);

Horse button

final url = 'https://www.applesaucekids.com/sound%20effects/horse_whinney_2.mp3';
await player.setUrl(url);

Run the app again and try it out.

It still works, though there is a slight delay while the file loads. If this is an issue you might want to give some visual feedback like a spinning circle. I’ll leave that for another tutorial, though.

  • If you use HTTP URLs instead of HTTPS ones, then you’ll need to permit that for Android, iOS and macOS apps. See this answer and the documentation for how to do that.
  • If you are publishing on iOS you need to set the microphone permission (even though it’s not used). That’s not necessary if you are just doing this tutorial. See the documentation and this issue for details.
  • On macOS (and Android for release builds) you need to allow your app to access the internet. See this Stack Overflow answer and the docs here and here for more.

Conclusion

This tutorial was a simple introduction to using Just Audio. There is a lot more that you can do with it, though. Check out the next tutorial in the series for more:

Tutorial source code

Here is the full source code for this tutorial.

If you find any problems add a comment below or open an issue in GitHub.

Flutter Community

Articles and Stories from the Flutter Community

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store