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



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>

<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>

Rename login.html to player.html

Delete playlist.html

Delete playlists.html

Delete search.html

<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>

<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>

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 + '

' + // 'message: ' + error.message + '

'); // 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; }])

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 itemsNow, we will clean up and rename the required files inside www/templates folderOpen www/templates/player.html and update it as belowThis 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 belowThis 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.