Ingenious Ways To Create Audio Player With Ionic

Audio Player With Ionic
Ingenious Ways To Create Audio Player With Ionic

Nowadays many applications are having other source of medium to show the information to the users other than text. For example, video and audio. In this article let’s focus on having audio player in your ionic application. An audio player for Ionic works with HTML5 audio or native audio using Cordova Media plugin. It creates an interface to the cordova-media plugin including a service that controls Media playback and directives to define the look and feel of the player.

Install dependencies for having audio player

$ bower install ionic-audio

Cordova media plugin

$ ionic plugin add cordova-plugin-media

Note: If your project does not have any platform then, you must add one and make a build if you want to test it on your device. Keep in mind that the plugin which we have installed above, depends on a Cordova plugin so the module won't run locally with ionic serve. However, you can still run the project locally to tune the UI before deploying to the device.

Include Js file in Index.html

 <script type="text/javascript" src="lib/ion-audio/dist/ion-audio.js"></script

Inject the dependency in your app's module

 angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ionic-audio'])

 

 
Inject this code in view file player UI using directives

<ion-view view-title="Music Player">   
<ion-content>
    <ion-audio-track track="track">
<div class="list list-inset">
           <div class="item item-thumbnail-left">
                <img src="{{track.art}}">
                <h2>{{track.title}}</h2>
                <p>{{track.artist}}</p>
              <ion-audio-controls>
               <a class="button button-icon icon"          
             ion-audio-play> 
          </a>
                <ion-spinner icon="ripple"></ion-spinner>
              </ion-audio-controls>
           </div>
              <div class="item">
                <ion-audio-progress-bar 
track="track" display-time>
</ion-audio-progress-bar>            
   </div>
</div>
    <ion-audio-track>
      </ion-content>
 </ion-view> 

 

Here, track="track" is a UI directives 

Ion-audio-track

This is directive which get us the track information about this audio.Using below mentioned JSON object, you can add the information about track in audio player. The interface of the player is defined in ion-audio-track body directive.

$scope.track = {
    url: 'http://www.xyz.com/simple_song.mp3',
    artist: 'abc',
    title: 'xyz',
    art: 'image/album.png'
}

 

Here, $scope.track.url is the path for audio if you want to play the local song in your android/ios device, just put that audio file in js folder and give the according path to that file in the code. Sample example,

 $scope.track = {
        url:'/android_asset/www/assets/mp3/simple_song.mp3',
        artist: 'abc',
        title: 'xyz',
        art: '/android_asset/www/assets/image/album.png'
  }

 

Use as a global progress bar

If a ion-audio-progress-bar is placed inside the scope of ion-audio-track, it will automatically work and will progress automatically according to the audio goes on. Add a display-info to show the current playing track. Add a display-time to show timing in track list.

<ion-audio-progress-bar display-time display-info></ion-audio-progress-bar>

Media Manager

Inject MediaManager in your controller if you need to access the currently playing track. For example, in order to stop playback before transitioning to another view any other action:

.controller('MusicCtrl', ['$scope', 'MediaManager', function($scope, MediaManager) {

$state.$on('$ionicView.beforeLeave', function() {
        MediaManager.stop();
    });

 

Hope you had quick solution for your purpose, feel free to Hire our Hybrid App Development service provider.