Use Local Audio in Flutter

Create Free Backend With Appwrite

Introduction

In this section, you will learn to use local audio in your flutter application with the help of real-world example. You will create a simple audio player app. Here are the steps to create a app:

Step 1: Add Audio File To Your Project

You can download sample audio file from here or you can use your own audio file. Place the audio file inside assets/audio with the name sound.mp3.

Step 2: Install audioplayers Package

To use local audio in your app, the first step is to add the audioplayers package in your project. Open terminal at your project folder and execute the following command:

flutter pub add audioplayers

Step 3: Update Pubspec.yaml Assets

Now, you need to update the pubspec.yaml file. Go to your pubspec.yaml file and add the following code in it:

flutter:
  assets:
    - assets/audio/sound.mp3

Step 4: Import the audioplayers Package

Now, you need to import the audioplayers package in your flutter application. To import the audioplayers package, open your main.dart file and add the following import statement:

import 'package:audioplayers/audioplayers.dart';

Step 5: Code for Audio Player

Now, you need to create a audio player widget. Open main.dart file and add the following code in it:

import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';

void main() {
  runApp(MyApp());
}

// Stateful widget to handle audio playback.
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState(); // State creation.
}

class _MyAppState extends State<MyApp> {
  final AudioPlayer audioPlayer = AudioPlayer(); // Audio player instance.

  @override
  void dispose() {
    audioPlayer.dispose(); // Release audio player resources.
    super.dispose();
  }

  // Plays an audio file.
  void playAudio() async {
    await audioPlayer.play(AssetSource('audio/sound.mp3'));
  }

  // Stops the audio playback.
  void stopAudio() async {
    await audioPlayer.stop();
  }

  @override
  Widget build(BuildContext context) {
    // Builds the app's UI.
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Audio Player Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                  onPressed: playAudio, child: const Text('Play Audio')),
              ElevatedButton(
                  onPressed: stopAudio, child: const Text('Stop Audio')),
            ],
          ),
        ),
      ),
    );
  }
}

Project Source Code

If you face any problem while creating this app, you can download the source code of this project from here.

Challenge

Create a simple audio player app which can play and stop the audio file from the following URL:

https://raw.githubusercontent.com/Flutter-Tutorial-Website/SimpleFlutterAudioPlayer/master/assets/audio/sound.mp3

Solution

You can simply create playAudioOnline() method and call it on button press. Here is the code for playAudioOnline() method:

void playAudioOnline() async {
    await audioPlayer.play(UrlSource('https://raw.githubusercontent.com/Flutter-Tutorial-Website/SimpleFlutterAudioPlayer/master/assets/audio/sound.mp3'));
  }