To add and play the audio files in the IONIC Angular project, the following steps are needed.
Many Thanks to Matthew Hoelter for the simplified example!
1) Install the NativeAudio
ionic cordova plugin add cordova-plugin-nativeaudio
npm install @ionic-native/native-audio
2) Import the NativeAudio
import { NativeAudio } from '@ionic-native/native-audio';
3) Create a service of your desired name here I am providing ‘AudioServiceProvider’
ionic g s AudioServiceProvider
4) In the constructor inject the NativeAudio
constructor(public platform: Platform,
private nativeAudio: NativeAudio) {
console.log('Hello AudioServiceProvider Provider');
}
5) In the platform loaded function unload any existing audio, you can do this dynamically for the existing audio files
this.platform.ready().then(() => {
console.log("platform is ready!");
this.nativeAudio.unload('Audio1').then(function() {
console.log("unloaded the audio!");
},
function(err) {
console.log("can't unload the audio" + err);
});
}
6) Add the audio file(s) in the assets folder 'assets/audio/chimes.mp3' is the location of the audio file what we are going to see as example
7) In the same method specify the following command
this.nativeAudio.preloadComplex('scanSuccess', 'assets/audio/chimes.mp3', 1, 1, 0).then(function() {
console.log("Loaded Successfully!");
});
8) Add the play audio method
playAudio(obj:any) {
let audioTrack = '';
if(obj=='S'){
audioTrack = 'scanSuccess';
}
this.nativeAudio.play(audioTrack).then(function() {
console.log("playing the audio!");
},
function(err) {
console.log("error playing the audio: " + err);
});
}
9) Inject the AudioService in the desired page
public audioService:AudioServiceProvider
10) Now call the following method to play the sound
this.audioService.playAudio('S');
Bingo! Now the audio plays!
Comments