Hi Friends,
In this post let’s see how to create a simple mobile app that would open an audio file and play it using Ionic 2 framework and some cordova plugins.
Let’s begin.
A screencast of this post.
The code for this post is available – here.
Open up a new Ionic 2 app using the below command.
|
1 |
ionic start musicapp --v2 blank |
(I would highly recommend you to install the latest version of Ionic CLI as they have made a lot of new updates).
We will be using three cordova plugins in our app. They are
- FileChooser – Available in ionic native.
- Filepath – https://github.com/hiddentao/cordova-plugin-filepath
- Media Plugin – Available in ionic natvie.
Let’s install these three plugins using the command below
|
1 2 3 |
ionic plugin add http://github.com/don/cordova-filechooser.git ionic plugin add cordova-plugin-media ionic plugin add cordova-plugin-filepath |
Now open up home.html and add the below code between the ion-content tags.
|
1 |
<button ion-button (click)="filechooser()">Click</button> |
Open up home.ts and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import {FileChooser, MediaPlugin} from 'ionic-native'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { nativepath: string; file; constructor(public navCtrl: NavController) { } filechooser() { FileChooser.open() .then(uri => { (<any>window).FilePath.resolveNativePath(uri, (result) => { this.nativepath = result; this.audioplay(); }, (err) => { alert(err); }) }) .catch(e => console.log(e)); } audioplay() { var pathalone = this.nativepath.substring(8); this.file = new MediaPlugin(pathalone, (status) => { }); this.file.play(); } } |
Let’s break this down.
Filechooser:
This plugin is used to open a file from our phone’s filesystem. It returns the URI of the file.
Filepath:
This plugin is used to convert the URI into a native path corresponding to the actual location of the file in the phone’s filesystem. In short; it converts the uri of format content://<somevalue> into file:///<pathtoaudiofile>
MediaPlugin:
This plugin is the one that actually plays the file. It creates a Media object which then comes with various inbuilt functions.
If you notice there is a line like the one shown below
|
1 |
var pathalone = this.nativepath.substring(8); |
This line is used to trim the filepath and get rid of the file:/// prefix thereby providing a clear path for the Media plugin.
Now just run the app using the below command.
|
1 |
ionic run android |
If everything goes fine you would get a app that has a button. Just by clicking that button you could choose a file from your phone and it would start playing.
Let’s spice up things a bit more and add a few more functionalities to our app like pause, stop.
Open up home.html and add the below code in between the <ion-content> tags.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<ion-fab center middle> <button color="danger" ion-fab="" class="fab fab-md fab-md-danger fab-close-active"> <ion-icon class="fab-close-icon icon-md ion-md-close" name="close" role="img" aria-label="close"></ion-icon> <span class="button-inner"> <ion-icon name="menu" role="img" class="icon-md ion-android-menu" aria-label="share"></ion-icon> </span> <div class="button-effect" style="transform: translate3d(-14px, -16px, 0px) scale(1); height: 102px; width: 102px; opacity: 0; transition: transform 301ms, opacity 211ms 90ms;"> </div> </button> <ion-fab-list side="top"> <button color="primary" ion-fab="" class="fab fab-ios fab-ios-dark fab-in-list" (click)="filechooser()"><ion-icon class="fab-close-icon icon-ios ion-ios-close" name="close" role="img" aria-label="close"></ion-icon><span class="button-inner"><ion-icon name="open" role="img" class="icon-ios ion-android-open" aria-label="logo vimeo"></ion-icon></span><div class="button-effect"></div></button> </ion-fab-list> <ion-fab-list side="bottom"> <button color="secondary" ion-fab="" class="fab fab-ios fab-ios-primary fab-in-list" (click)="audiostop()"><ion-icon class="fab-close-icon icon-ios ion-ios-close" name="close" role="img" aria-label="close"></ion-icon><span class="button-inner"><ion-icon name="stop" role="img" class="icon-ios ion-stop" aria-label="logo facebook"></ion-icon></span><div class="button-effect"></div></button> </ion-fab-list> <ion-fab-list side="left"> <button color="light" ion-fab="" class="fab fab-ios fab-ios-light fab-in-list" (click)="audiopause()"><ion-icon class="fab-close-icon icon-ios ion-ios-close" name="close" role="img" aria-label="close"></ion-icon><span class="button-inner"><ion-icon name="pause" role="img" class="icon-ios ion-ios-pause" aria-label="logo googleplus"></ion-icon></span><div class="button-effect"></div></button> </ion-fab-list> <ion-fab-list side="right"> <button color="dark" ion-fab="" class="fab fab-ios fab-ios-secondary fab-in-list" (click)="playaudio()"><ion-icon class="fab-close-icon icon-ios ion-ios-close" name="close" role="img" aria-label="close"></ion-icon><span class="button-inner"><ion-icon name="play" role="img" class="icon-ios ion-ios-play" aria-label="logo twitter"></ion-icon></span><div class="button-effect"></div></button> </ion-fab-list> </ion-fab> |
This code would create a fab button on the center which upon clicking will give you four more fabs for opening a file, playing, pausing and stopping respectively.
Let’s write some functions. Go back to home.ts file and add the below code.
|
1 2 3 4 5 6 7 8 9 10 11 |
playaudio() { this.file.play(); } audiostop() { this.file.stop(); } audiopause() { this.file.pause(); } |
As the name suggests you now have play, stop and pause functionalities in your app.
Now run the app. If everything goes fine then you can see a wonderful app that enables you to open the music file of your choice and play.
Point to notice:
Once playback is done kindly use the below line of code to release the file.
|
1 |
this.file.release() |
If the file is not released then it would be held up by your app and other apps won’t be able to access it.
You could add more features to this app like playlists.. Just by adding the filepaths of various audio files and saving it so that it could be played one by one upon successful completion of the playback of one file.
You could also add a seekbar to our app using the <ion-range> component which again is a wonderful tool to use.
Hope this helped you guys. Thanks for reading. Kindly share it with someone else and help them too.
Peace.:)
