DEV Community

loading...
Cover image for Flutter Audio Recording Example

Flutter Audio Recording Example

rrtutors
I am an Android and Flutter Developer. Having 7+ Years of Experience in Mobile application development. Looking for article writers on my website.
Originally published at rrtutors.com ・4 min read

Create Flutter Audio Recording application. To record audio we create a class and to play audio file we used audioplayers plugin. We have updated all plugins to null safety

In this example we will cover

  • Record Audio

  • Save the Recorded Audio file

  • Fetch and Display all Recodrings

  • Share the recodrings with other applcations
  • Record Audio

    To Record Audio we need to create FlutterAudioRecorder instance

    var recorder = FlutterAudioRecorder("file_path.mp4"); // .wav .aac .m4a
    await recorder.initialized;
    
    Enter fullscreen mode Exit fullscreen mode

    To Start the Recording

    await recorder.start();
    var recording = await recorder.current(channel: 0);
    
    Enter fullscreen mode Exit fullscreen mode

    Fetch and Display all Recordings

    To fetch the saved recordings we need to pass out file directory path to Directory class .

    This will return list of files inside the folder

    getExternalStorageDirectory().then((value) {
      appDir = value.;
      Directory appDirec = Directory("${appDir.path}/Audiorecords/");
      appDir = appDirec;
      appDir.list().listen((onData) {
        records.add(onData.path);
      }).onDone(() {
        records = records.reversed.toList();
        setState(() {});
      });
    });
    
    Enter fullscreen mode Exit fullscreen mode

    Share Audio

    To share any file or text we used share: ^0.6.5+4 plugin.To share particular audio recording we need to pass its path to

    Share.shareFiles(list)
    
    This Share Files will take the List of file paths as parameter.
    
    Directory appDirec =
    Directory(widget.records.elementAt(i));
    List<String>list=List();
    list.add(appDirec.path);
    Share.shareFiles(list);
    
    Enter fullscreen mode Exit fullscreen mode

    Show Record Option on Button Event

    import 'dart:async';
    import 'dart:io';
    import 'package:flutter/material.dart';
    import 'audio_recorder.dart';
    import 'package:fluttertoast/fluttertoast.dart';
    import 'package:path_provider/path_provider.dart';
    import 'package:permission_handler/permission_handler.dart';
    
    class Recorder extends StatefulWidget {
      final Function save;
    
      const Recorder({Key? key, required this.save}) : super(key: key);
      @override
      _RecorderState createState() => _RecorderState();
    }
    
    class _RecorderState extends State<Recorder> {
      IconData _recordIcon = Icons.mic_none;
      MaterialColor colo = Colors.orange;
      RecordingStatus _currentStatus = RecordingStatus.Unset;
      bool stop = false;
       Recording? _current;
      // Recorder properties
      late FlutterAudioRecorder? audioRecorder;
    
      @override
      void initState() {
        super.initState();
        checkPermission();
      }
      checkPermission()async{
    
        if (await Permission.contacts.request().isGranted) {
          // Either the permission was already granted before or the user just granted it.
        }
    
    // You can request multiple permissions at once.
        Map<Permission, PermissionStatus> statuses = await [
          Permission.microphone,
          Permission.storage,
        ].request();
        print(statuses[Permission.microphone]);
        print(statuses[Permission.storage]);
        //bool hasPermission = await FlutterAudioRecorder.hasPermissions ?? false;
        if (statuses[Permission.microphone]==PermissionStatus.granted) {
          _currentStatus = RecordingStatus.Initialized;
          _recordIcon = Icons.mic;
        }else
          {
    
          }
      }
    
      @override
      void dispose() {
        _currentStatus = RecordingStatus.Unset;
        audioRecorder = null;
        super.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return Stack(
          alignment: Alignment.center,
          children: [
            Column(
              children: [
                SizedBox(height: 20,),
                Text(
                (_current==null)?"0:0:0:0":_current!.duration.toString() ?? "0:0:0:0",
                  style: TextStyle(color: Colors.black, fontSize: 20),
                ),
                SizedBox(height: 20,),
                stop == false
                    ? RaisedButton(
                  color: Colors.orange,
                  onPressed: () async {
                    await _onRecordButtonPressed();
                    setState(() {});
                  },
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Column(
                    children: [
                      Container(
                        width: 80,
                        height: 80,
                        child: Icon(
                          _recordIcon,
                          color: Colors.white,
                          size: 80,
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text("Write Dailry",style: TextStyle(color: Colors.white),),
                      )
                    ],
                  ),
                )
                    : Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      RaisedButton(
                        color: colo,
                        onPressed: () async {
                          await _onRecordButtonPressed();
                          setState(() {});
                        },
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10),
                        ),
                        child: Container(
                          width: 80,
                          height: 80,
                          child: Icon(
                            _recordIcon,
                            color: Colors.white,
                            size: 50,
                          ),
                        ),
                      ),
                      RaisedButton(
                        color: Colors.orange,
                        onPressed: _currentStatus != RecordingStatus.Unset
                            ? _stop
                            : null,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10),
                        ),
                        child: Container(
                          width: 80,
                          height: 80,
                          child: Icon(
                            Icons.stop,
                            color: Colors.white,
                            size: 50,
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
    
              ],
            ),
          ],
        );
      }
    
      Future<void> _onRecordButtonPressed() async {
        switch (_currentStatus) {
          case RecordingStatus.Initialized:
            {
              _recordo();
              break;
            }
          case RecordingStatus.Recording:
            {
              _pause();
              break;
            }
          case RecordingStatus.Paused:
            {
              _resume();
              break;
            }
          case RecordingStatus.Stopped:
            {
              _recordo();
              break;
            }
          default:
            break;
        }
      }
    
      _initial() async {
        Directory? appDir = await getExternalStorageDirectory();
        String jrecord = 'Audiorecords';
        String dato = "${DateTime.now()!.millisecondsSinceEpoch?.toString()}.wav";
        Directory appDirec =
        Directory("${appDir!.path}/$jrecord/");
        if (await appDirec.exists()) {
          String patho = "${appDirec.path}$dato";
          print("path for file11 ${patho}");
          audioRecorder = FlutterAudioRecorder(patho, audioFormat: AudioFormat.WAV);
          await audioRecorder!.initialized;
        } else {
          appDirec.create(recursive: true);
          Fluttertoast.showToast(msg: "Start Recording , Press Start");
          String patho = "${appDirec.path}$dato";
          print("path for file22 ${patho}");
          audioRecorder = FlutterAudioRecorder(patho, audioFormat: AudioFormat.WAV);
          await audioRecorder!.initialized;
        }
      }
    
      _start() async {
        await audioRecorder!.start();
        var recording = await audioRecorder!.current(channel: 0);
        setState(() {
          _current = recording!;
        });
    
        const tick = const Duration(milliseconds: 50);
        new Timer.periodic(tick, (Timer t) async {
          if (_currentStatus == RecordingStatus.Stopped) {
            t.cancel();
          }
    
          var current = await audioRecorder!.current(channel: 0);
          // print(current.status);
          setState(() {
            _current = current!;
            _currentStatus = _current!.status!;
          });
        });
      }
    
      _resume() async {
        await audioRecorder!.resume();
        Fluttertoast.showToast(msg: "Resume Recording");
        setState(() {
          _recordIcon = Icons.pause;
          colo = Colors.red;
        });
      }
    
      _pause() async {
        await audioRecorder!.pause();
        Fluttertoast.showToast(msg: "Pause Recording");
        setState(() {
          _recordIcon = Icons.mic;
          colo = Colors.green;
        });
      }
    
      _stop() async {
        var result = await audioRecorder!.stop();
        Fluttertoast.showToast(msg: "Stop Recording , File Saved");
        widget.save();
        setState(() {
          _current = result!;
          _currentStatus = _current!.status!;
          _current!.duration = null;
          _recordIcon = Icons.mic;
          stop = false;
        });
      }
    
      Future<void> _recordo() async {
    
        Map<Permission, PermissionStatus> statuses = await [
          Permission.microphone,
          Permission.storage,
        ].request();
        print(statuses[Permission.microphone]);
        print(statuses[Permission.storage]);
        //bool hasPermission = await FlutterAudioRecorder.hasPermissions ?? false;
        if (statuses[Permission.microphone]==PermissionStatus.granted) {
    
       /* }
        bool hasPermission = await FlutterAudioRecorder.hasPermissions ?? false;
    
        if (hasPermission) {*/
          await _initial();
          await _start();
          Fluttertoast.showToast(msg: "Start Recording");
          setState(() {
            _currentStatus = RecordingStatus.Recording;
            _recordIcon = Icons.pause;
            colo = Colors.red;
            stop = true;
          });
        } else {
          Fluttertoast.showToast(msg: "Allow App To Use Mic");
        }
      }
    }
    
    Enter fullscreen mode Exit fullscreen mode

    Download Flutter Audio Recording Example code

    Discussion (0)