ionic tutorial - Ionic cordova | Ionic Cordova Media - ionic - ionic development - ionic 2 - ionic framework
- The Cordova Media allows us to record and playback audio files on a device.
- Some hints if you are using iOS and recording doesn't work: 1.) Try to use an absolute file path but remove beginning "file://". Then it looks like: /var/mobile/Containers/Data/Application/AF438B8B-7724-4FBB-8E69-083463224FC4/tmp/my_file.m4a
- Example:this.media.create(this.file.tempDirectory.replace(/^file:\/\//, '') + 'my_file.m4a') 2.) If that's not working, too, create the file before
Using Media
- As with all the other Cordova plugins, the first thing we need to do is to install it from command prompt window.
C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-media
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- Now we are ready to use the plugin. In the following code sample src is the source mp3 file that we will use for this tutorial.
- It is placed in js folder but we need to add /android_asset/www/ before it so it can be used on android devices.
- Entire functionality is wrapped inside $ionicPlatform.ready() function to assure that everything is loaded before the plugin is used.
- After that we are creating media object by using newMedia(src) method. The media object is used for adding play, pause, stop and release functionalities.
Controller Code
.controller('MyCtrl', function($scope, $ionicPlatform, $cordovaMedia) {
$ionicPlatform.ready(function() {
var src = "/android_asset/www/js/song.mp3";
var media = $cordovaMedia.newMedia(src);
$scope.playMedia = function() {
media.play();
};
$scope.pauseMedia = function() {
media.pause();
};
$scope.stopMedia = function() {
media.stop();
};
$scope.$on('destroy', function() {
media.release();
});
});
}Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- We will also create three buttons for calling play, pause and stop functions.
<button class = "button" ng-click = "playMedia()">PLAY</button>
<button class = "button" ng-click = "pauseMedia()">PAUSE</button>
<button class = "button" ng-click = "stopMedia()">STOP</button>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- We need to run it on emulator or mobile device for this plugin to work. When users tap on play button the song.mp3 will start playing.
- You can see in the example above that we use src as an option parameter. There are other optional parameters that can be used for the newMedia method.
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Optional parameters
| Parameter | Type | Details |
|---|---|---|
| mediaSuccess | function | Called after current play/record or stop action has completed. |
| mediaError | function | Invoked when there is an error. |
| mediaStatus | function | Invoked to show status changes. |
- The next table will show all the methods available.
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Available methods
| Method | Parameters | Details |
|---|---|---|
| newMedia(parameter1) | src | Returns media object that will be used for future methods. src is an URI of the audio content. |
| getCurrentPosition | / | Returns the current position within an audio file. |
| getDuration | / | Returns the duration of an audio file. |
| play | / | Used to start or resume playing. |
| pause | / | Used to pause playback. |
| stop | / | Used to stop playing. |
| release | / | Used to release audio resources. |
| seekTo(parameter1) | milliseconds | Used to set the playback position in milliseconds. |
| setVolume(parameter1) | volume | Used to change volume. Range is from 0 to 1 |
| startRecord() | / | Used to start recording. |
| stopRecord | / | Used to stop recording. |