Implement Audio Trimmer In Flutter
In this article, we will explore the Implement Audio Trimmer In Flutter. We perceive how to execute a demo program. We will show you how to trim audio files and save the trimmed audio files to the device utilizing the easy_audio_trimmer package in your Flutter applications.
- For easy_audio_trimmer:
easy_audio_trimmer | Flutter Package
A Flutter package for trimming audio. This supports retrieving, trimming, and storing trimmed audio files in the…pub.dev
- For file_picker:
file_picker | Flutter Package
A package that allows you to use a native file explorer to pick single or multiple absolute file paths, with extension…pub.dev
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents::
Introduction:
An audio trimmer is an audio editor intended to cut, trim, or split audio parts. It permits you to eliminate undesirable parts from your audio clips and save the subsequent piece of the audio in different audio files organizations like MP3, WAV, AAC, FLAC, OGG, and WMA.
Audio trimmers fill a crucial need empowering clients to cut and refine audio cuts as per their inclinations. This usefulness tracks down applications in different situations, including making tweaked ringtones, altering, or just extricating important parts from extended recordings.
This demo video shows how to implement Audio Trimmer in Flutter and how Audio Trimmer will work using the easy_audio_trimmer package and in your Flutter applications. We will show you the simplest way to trim and save audio files on your device.
Demo Module::
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
flutter:
sdk: flutter
easy_audio_trimmer: ^1.0.2+4
file_picker: ^6.1.1Step 2: Import
import 'package:easy_audio_trimmer/easy_audio_trimmer.dart';
import 'package:file_picker/file_picker.dart';Step 3: Run flutter packages get in the root directory of your app.
Step 4: While running on the Android platform if it gives an error that minSdkVersion needs to be 24, or on the iOS platform that the Podfile platform version should be 11
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In this dart file, we will create a new class AudioTrimmerDemo(). In this class, will add an ElevatedButton(). In this button, we will add the text “Select File” to its child function, and on the onPressed function, we will add the pick-up audio file function.
Center(
child: ElevatedButton(
style:
ElevatedButton.styleFrom(backgroundColor: Colors.teal.shade50),
onPressed: () async {
FilePickerResult? result = await FilePicker.platform.pickFiles(
type: FileType.audio,
allowCompression: false,
);
if (result != null) {
File file = File(result.files.single.path!);
Navigator.of(context).push(
MaterialPageRoute(builder: (context) {
return AudioTrimmerViewDemo(file);
}),
);
}
},
child: const Text(
"Select File",
style: TextStyle(color: Colors.teal),
)),
),When we run the application, we ought to get the screen’s output like the underneath screen capture.
In the same dart file, we will create another new class AudioTrimmerViewDemo().
In this class, we will create a final Trimmer variable which is _trimmer is equal to Trimmer(). We will create two double variables _startValue and _endValue equal to 0.0. Also, we will create a three-bool variable was _isPlaying, _progressVisibility, and isLoading equal to false.
final Trimmer _trimmer = Trimmer();
double _startValue = 0.0;
double _endValue = 0.0;
bool _isPlaying = false;
bool _progressVisibility = false;
bool isLoading = false;We will create an initState() method. In this method, we will add a _loadAudio() method. In this method, we will load the trimmer audio files.
@override
void initState() {
super.initState();
_loadAudio();
}
void _loadAudio() async {
setState(() {
isLoading = true;
});
await _trimmer.loadAudio(audioFile: widget.file);
setState(() {
isLoading = false;
});
}We will create a _saveAudio method. In this method, we will save trimmed audio files.
_saveAudio() {
setState(() {
_progressVisibility = true;
});
_trimmer.saveTrimmedAudio(
startValue: _startValue,
endValue: _endValue,
audioFileName: DateTime.now().millisecondsSinceEpoch.toString(),
onSave: (outputPath) {
setState(() {
_progressVisibility = false;
});
debugPrint('OUTPUT PATH: $outputPath');
},
);
}In the body part, we will create an audio trimmer view using the TrimViewer() method. In this method, we will set backgroundColor, barColor, viewerHeight, onChangeStart, etc.
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TrimViewer(
trimmer: _trimmer,
viewerHeight: 100,
viewerWidth: MediaQuery.of(context).size.width,
durationStyle: DurationStyle.FORMAT_MM_SS,
backgroundColor:Colors.teal,
barColor: Colors.white,
durationTextStyle: const TextStyle(
color: Colors.teal),
allowAudioSelection: true,
editorProperties: const TrimEditorProperties(
circleSize: 10,
borderPaintColor: Colors.red,
borderWidth: 4,
borderRadius: 5,
circlePaintColor: Colors.redAccent,
),
areaProperties:
TrimAreaProperties.edgeBlur(blurEdges:true),
onChangeStart: (value) => _startValue = value,
onChangeEnd: (value) => _endValue = value,
onChangePlaybackState: (value) {
if (mounted) {
setState(() => _isPlaying = value);
}
},
),
),
),Also, we will add the TextButton() method. In this method, we will add play and pause button functions.
TextButton(
child: _isPlaying
? const Icon(
Icons.pause,
size: 80.0,
color: Colors.teal,
)
: const Icon(
Icons.play_arrow,
size: 80.0,
color: Colors.teal,
),
onPressed: () async {
bool playbackState =
await _trimmer.audioPlaybackControl(
startValue: _startValue,
endValue: _endValue,
);
setState(() => _isPlaying = playbackState);
},
),Also, we will add the Visibility() method. In this method, we will add LinearProgressIndicator(). This method will work on the save button only. When the user presses save the audio then the LinearProgressIndicator will be shown.
Visibility(
visible: _progressVisibility,
child: LinearProgressIndicator(
backgroundColor:
Theme.of(context).primaryColor.withOpacity(0.5),
),
),
ElevatedButton(
style:
ElevatedButton.styleFrom(backgroundColor: Colors.teal.shade50),
onPressed:
_progressVisibility ? null : () =>_saveAudio(),
child: const Text("SAVE",style: TextStyle(color: Colors.teal)),
),When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'dart:io';
import 'package:easy_audio_trimmer/easy_audio_trimmer.dart';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
home: AudioTrimmerDemo(),
);
}
}
class AudioTrimmerDemo extends StatefulWidget {
const AudioTrimmerDemo({super.key});
@override
State<AudioTrimmerDemo> createState() => _AudioTrimmerDemoState();
}
class _AudioTrimmerDemoState extends State<AudioTrimmerDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
automaticallyImplyLeading: false,
centerTitle: true,
title: const Text(
"Flutter Audio Trimmer Demo",
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.teal,
),
body: Center(
child: ElevatedButton(
style:
ElevatedButton.styleFrom(backgroundColor: Colors.teal.shade50),
onPressed: () async {
FilePickerResult? result = await FilePicker.platform.pickFiles(
type: FileType.audio,
allowCompression: false,
);
if (result != null) {
File file = File(result.files.single.path!);
Navigator.of(context).push(
MaterialPageRoute(builder: (context) {
return AudioTrimmerViewDemo(file);
}),
);
}
},
child: const Text(
"Select File",
style: TextStyle(color: Colors.teal),
)),
),
);
}
}
class AudioTrimmerViewDemo extends StatefulWidget {
final File file;
const AudioTrimmerViewDemo(this.file, {Key? key}) : super(key: key);
@override
State<AudioTrimmerViewDemo> createState() => _AudioTrimmerViewDemoState();
}
class _AudioTrimmerViewDemoState extends State<AudioTrimmerViewDemo> {
final Trimmer _trimmer = Trimmer();
double _startValue = 0.0;
double _endValue = 0.0;
bool _isPlaying = false;
bool _progressVisibility = false;
bool isLoading = false;
@override
void initState() {
super.initState();
_loadAudio();
}
void _loadAudio() async {
setState(() {
isLoading = true;
});
await _trimmer.loadAudio(audioFile: widget.file);
setState(() {
isLoading = false;
});
}
_saveAudio() {
setState(() {
_progressVisibility = true;
});
_trimmer.saveTrimmedAudio(
startValue: _startValue,
endValue: _endValue,
audioFileName: DateTime.now().millisecondsSinceEpoch.toString(),
onSave: (outputPath) {
setState(() {
_progressVisibility = false;
});
debugPrint('OUTPUT PATH: $outputPath');
},
);
}
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
if (Navigator.of(context).userGestureInProgress) {
return false;
} else {
return true;
}
},
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
centerTitle: true,
title: const Text(
"Flutter Audio Trimmer Demo",
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.teal,
),
body: isLoading
? const Center(child: CircularProgressIndicator())
: Center(
child: Container(
padding: const EdgeInsets.only(bottom: 30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TrimViewer(
trimmer: _trimmer,
viewerHeight: 100,
viewerWidth: MediaQuery.of(context).size.width,
durationStyle: DurationStyle.FORMAT_MM_SS,
backgroundColor:Colors.teal,
barColor: Colors.white,
durationTextStyle: const TextStyle(
color: Colors.teal),
allowAudioSelection: true,
editorProperties: const TrimEditorProperties(
circleSize: 10,
borderPaintColor: Colors.red,
borderWidth: 4,
borderRadius: 5,
circlePaintColor: Colors.redAccent,
),
areaProperties:
TrimAreaProperties.edgeBlur(blurEdges:true),
onChangeStart: (value) => _startValue = value,
onChangeEnd: (value) => _endValue = value,
onChangePlaybackState: (value) {
if (mounted) {
setState(() => _isPlaying = value);
}
},
),
),
),
TextButton(
child: _isPlaying
? const Icon(
Icons.pause,
size: 80.0,
color: Colors.teal,
)
: const Icon(
Icons.play_arrow,
size: 80.0,
color: Colors.teal,
),
onPressed: () async {
bool playbackState =
await _trimmer.audioPlaybackControl(
startValue: _startValue,
endValue: _endValue,
);
setState(() => _isPlaying = playbackState);
},
),
Visibility(
visible: _progressVisibility,
child: LinearProgressIndicator(
backgroundColor:
Theme.of(context).primaryColor.withOpacity(0.5),
),
),
ElevatedButton(
style:
ElevatedButton.styleFrom(backgroundColor: Colors.teal.shade50),
onPressed:
_progressVisibility ? null : () =>_saveAudio(),
child: const Text("SAVE",style: TextStyle(color: Colors.teal)),
),
],
),
),
),
),
);
}
}Conclusion:
In the article, I have explained the Audio Trimmer In Flutter; you can modify this code according to your choice. This was a small introduction to the Audio Trimmer In Flutter User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Audio Trimmer in your Flutter projects. We will show you what the Introduction is. Make a demo program for working on Audio Trimmer in your Flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I need to correct something? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
