Ionic CSS Components
- Ionic - Padding
- Ionic - Icons
- Ionic - Grid
- Ionic - Tabs
- Ionic - Select
- Ionic - Range
- Ionic - Radio Button
- Ionic - Checkbox
- Ionic - Toggle
- Ionic - Forms
- Ionic - Cards
- Ionic - Lists
- Ionic - Buttons
- Ionic - Footer
- Ionic - Header
- Ionic - Content
- Ionic - Colors
Ionic Javascript Components
- Ionic - JS Tabs
- Ionic - JS Slide Box
- Ionic - JS Side Menu
- Ionic - JS Scroll
- Ionic - JS Popup
- Ionic - JS Popover
- Ionic - JS Navigation
- Ionic - JS Modal
- Ionic - JS Loading
- Ionic - JS List
- Ionic - JS Keyboard
- Ionic - JS Footer
- Ionic - JS Header
- Ionic - JS Events
- Ionic - JS Forms
- Ionic - JS Content
- Ionic - JS Backdrop
- Ionic - JS Action Sheet
Ionic Advanced Concepts
- Ionic - Splash Screen
- Ionic - Media
- Ionic - Geolocation
- Ionic - Native Audio
- Ionic - In App Browser
- Ionic - Facebook
- Ionic - Camera
- Ionic - AdMob
- Ionic - Cordova Integration
Ionic Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Ionic - Cordova Native Audio
This plugin is used for adding native audio sounds to the Ionic app.
Using Native Audio
To be able to use this plugin, we first need to install it. Open the command prompt window and add the Cordova plugin.
C:UsersUsernameDesktopMyApp>cordova plugin add cordova-plugin-nativeaudio
Before we start using this plugin, we will need audio file. For simppcity, we will save our cpck.mp3 file inside the js folder, but you can place it wherever you want.
The next step is to preload the audio file. There are two options available, which are −
preloadSimple − It is used for simple sounds that will be played once.
preloadComplex − It is for sounds that will be played as looping sounds or background audio.
Add the following code to your controller to preload an audio file. We need to be sure that the Ionic platform is loaded before we can preload the audio file.
Controller Code
$ionicPlatform.ready(function() { $cordovaNativeAudio .preloadSimple( cpck , js/cpck.mp3 ) .then(function (msg) { console.log(msg); }, function (error) { console.log(error); }); $cordovaNativeAudio.preloadComplex( cpck , js/cpck.mp3 , 1, 1) .then(function (msg) { console.log(msg); }, function (error) { console.error(error); }); });
In the same controller, we will add code for playing audio. Our $timeout function will stop and unload looping audio after five seconds.
$scope.playAudio = function () { $cordovaNativeAudio.play( cpck ); }; $scope.loopAudio = function () { $cordovaNativeAudio.loop( cpck ); $timeout(function () { $cordovaNativeAudio.stop( cpck ); $cordovaNativeAudio.unload( cpck ); }, 5000); }
The last thing we need is to create buttons for playing and looping audio.
HTML Code
<button class = "button" ng-cpck = "playAudio()">PLAY</button> <button class = "button" ng-cpck = "loopAudio()">LOOP</button>
When we tap on play button, we will hear the sound once and when we tap on the loop button, the sound will loop for five seconds and then stop. This plugin works only on an emulator or a mobile device.
Advertisements