Ionic Framework, Cordova and File API – A Media Player App

Ionic Framework, Cordova and File API – A Media Player App

Ionic Framework, Cordova and File API - A media Player App Previously Ionic Framework mostly disscued today Ionic Framework How to add media Player Disscussed.  Here Fully Explained this task follow us.
Cordova and File API – A Media Player App
Cordova and File API – A Media Player App

This Post Main reason build a  Media player using Ionic Framework and Cordova plugins. The media player will app show a player interface and a couple of buttons. The user can browse through the filesystem and pick a file to play. The initial request was to play both Audio and Video files inline. But I was only able to get the Audio files to play inline where as the Video will be launched in the device default video player.

Requisites:



The first thing we are going to do is update index.html. Open www/index.html in your favorite editor and update it as below

<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> <script src="js/audio.service.js"></script> <script src="js/controllers.js"></script> </head> <body ng-app="starter"> <ion-nav-view></ion-nav-view> </body> </html>
We have referred the audio service JS code that consist of the logic to deal with the Media API and the controllers file which consist of the controller logic.

Next, open www/templates/menu.html. We will update this file with fewer menu items



<ion-side-menus enable-menu-with-back-views="false">
    <ion-side-menu-content>
        <ion-nav-bar class="bar-assertive">
            <ion-nav-back-button>
            </ion-nav-back-button>
            <ion-nav-buttons side="left">
                <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
                </button>
            </ion-nav-buttons>
        </ion-nav-bar>
        <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-side-menu-content>
    <ion-side-menu side="left">
        <ion-header-bar class="bar-assertive">
            <h1 class="title">Menu</h1>
        </ion-header-bar>
        <ion-content>
            <ion-list>
                <ion-item nav-clear menu-close ng-click="player()">
                    Player
                </ion-item>
                <ion-item nav-clear menu-close href="#/app/browse">
                    Browse
                </ion-item>
            </ion-list>
        </ion-content>
    </ion-side-menu>
</ion-side-menus>
Now, we will clean up and rename the required files inside www/templates folder


  • Rename login.html to player.html
  • Delete playlist.html
  • Delete playlists.html
  • Delete search.html

Open www/templates/player.html and update it as below

<ion-modal-view>
    <ion-header-bar class="bar-assertive">
        <h1 class="title">Player</h1>
        <div class="buttons">
            <button class="button button-clear" ng-click="hidePlayer()">Hide</button>
        </div>
    </ion-header-bar>
    <ion-content class="padding">
        <div class="list card">
            <div class="item">
                <h2><i class="icon ion-ios-musical-notes"></i> {{name || '--'}}</h2>
                <p>{{path || '--'}}</p>
            </div>
            <div class="item item-body">
                <div ng-hide="loaded">
                    <label>Please select a Media file to play</label>
                </div>
                <div ng-show="loaded" style="height: 30px; width: {{position}}%; transition: width 0.2s; background: #e42012;">
                </div>
            </div>
            <div class="item tabs tabs-secondary tabs-icon-left">
                <a class="tab-item" href="javascript:" ng-click="resumeAudio()" ng-hide="isPlaying || !loaded">
                    <i class="icon ion-ios-play"></i> Play
                </a>
                <a class="tab-item" href="javascript:" ng-click="pauseAudio()" ng-show="isPlaying">
                    <i class="icon ion-pause"></i> Pause
                </a>
                <a class="tab-item" href="javascript:" ng-click="stopAudio()" ng-show="isPlaying">
                    <i class="icon ion-stop"></i> Stop
                </a>
            </div>
        </div>
    </ion-content>
</ion-modal-view>
This template will be shown when we init the Ionic Modal. This Modal will always be in the background while the app is running.

This template is the base for showing the audio player. Line 18 consists of the logic to show the seek bar. Line 22 shows the play button, when we have paused the video using the button on line 25. We can also stop the media play back completely using the Stop button.

As you can see from the directives on these buttons, they are subjected to visibility based on the state of the audio file.

Next, open www/templates/browse.html and update it as below
<ion-view view-title="Browse">
    <ion-content>
        <ion-item class="item-icon-left item-icon-right" ng-repeat="file in files" type="item-text-wrap" ng-click="showSubDirs(file)">
            <i class="icon" ng-class="{'ion-android-folder' : file.isDirectory, 'ion-eye' : (!file.isDirectory && !file.isUpNav), 'ion-arrow-up-c' : file.isUpNav}"></i>
            <h2>{{file.name}}</h2>
            <p>Location : {{file.fullPath}}</p>
            <i class="icon ion-chevron-right icon-accessory" ng-show="file.isDirectory"></i>
        </ion-item>
    </ion-content>
</ion-view>
This is a very simple template drive by the files[]  from scope. When the user launches the browse page, we will query the file system and show the root files. Once the user clicks on a particular folder, we query the file system API passing in the current folder as the root and fetch its children.

And when a user selects a file, we check if it is of the type audio or video and then play it. Else we will show a message that we cannot play the selected file.

This completes all our templates. We will now work with the Audio Service. Open www/js folder and create a new file named audio.service.js and update it as below.

angular.module('starter.services', [])
 
.service('AudioSvc', [function() {
 
  var AudioSvc = {
    my_media: null,
    mediaTimer: null,
    playAudio: function(src, cb) {
      var self = this;
 
      // stop playing, if playing
      self.stopAudio();
 
      self.my_media = new Media(src, onSuccess, onError);
      self.my_media.play();
 
      if (self.mediaTimer == null) {
        self.mediaTimer = setInterval(function() {
          self.my_media.getCurrentPosition(
            function(position) {
              cb(position, self.my_media.getDuration());
            },
            function(e) {
              console.log("Error getting pos=" + e);
            }
          );
        }, 1000);
      }
 
      function onSuccess() {
        console.log("playAudio():Audio Success");
      }
 
      // onError Callback
      //
      function onError(error) {
        // alert('code: ' + error.code + '\n' +
        //     'message: ' + error.message + '\n');
 
        // we forcefully stop
 
      }
 
    },
 
    resumeAudio: function() {
      var self = this;
      if (self.my_media) {
        self.my_media.play();
      }
    },
    pauseAudio: function() {
      var self = this;
      if (self.my_media) {
        self.my_media.pause();
      }
    },
    stopAudio: function() {
      var self = this;
      if (self.my_media) {
        self.my_media.stop();
      }
      if (self.mediaTimer) {
        clearInterval(self.mediaTimer);
        self.mediaTimer = null;
      }
    }
 
  };
 
  return AudioSvc;
}])
Ionic Framework, Cordova and File API – A Media Player App Dev2Tricks 5 of 5
Ionic Framework, Cordova and File API – A Media Player App Ionic Framework, Cordova and File API - A media Player App Previously Ionic F...

Share this

Related Posts

Previous
Next Post »