Ionic - Cordova Native Audio

Questo plugin viene utilizzato per aggiungere suoni audio nativi all'app Ionic.

Utilizzo dell'audio nativo

Per poter utilizzare questo plugin, dobbiamo prima installarlo. Apri la finestra del prompt dei comandi e aggiungi il plug-in Cordova.

C:\Users\Username\Desktop\MyApp>cordova plugin add cordova-plugin-nativeaudio

Prima di iniziare a utilizzare questo plugin, avremo bisogno di un file audio. Per semplicità, salveremo il nostro fileclick.mp3 file all'interno del js cartella, ma puoi posizionarla dove vuoi.

Il passaggio successivo consiste nel precaricare il file audio. Sono disponibili due opzioni, che sono:

• preloadSimple - Viene utilizzato per suoni semplici che verranno riprodotti una volta.

• preloadComplex - È per i suoni che verranno riprodotti come suoni in loop o audio di sottofondo.

Aggiungi il codice seguente al tuo controller per precaricare un file audio. Dobbiamo essere sicuri che la piattaforma Ionic sia caricata prima di poter precaricare il file audio.

Codice controller

$ionicPlatform.ready(function() {
   $cordovaNativeAudio
   .preloadSimple('click', 'js/click.mp3')
	
   .then(function (msg) {
      console.log(msg);
   }, function (error) {
      console.log(error);
   });

   $cordovaNativeAudio.preloadComplex('click', 'js/click.mp3', 1, 1)
	.then(function (msg) {
      console.log(msg);
   }, function (error) {
      console.error(error);
   });
});

Nello stesso controller, aggiungeremo il codice per la riproduzione dell'audio. Nostro$timeout la funzione si fermerà e scaricherà l'audio in loop dopo cinque secondi.

$scope.playAudio = function () {
   $cordovaNativeAudio.play('click');
};

$scope.loopAudio = function () {
   $cordovaNativeAudio.loop('click');

   $timeout(function () {
      $cordovaNativeAudio.stop('click');
      $cordovaNativeAudio.unload('click');
   }, 5000);
}

L'ultima cosa di cui abbiamo bisogno è creare pulsanti per riprodurre e riprodurre in loop l'audio.

Codice HTML

<button class = "button" ng-click = "playAudio()">PLAY</button>

<button class = "button" ng-click = "loopAudio()">LOOP</button>

Quando tocchiamo il pulsante di riproduzione, sentiremo il suono una volta e quando tocchiamo il pulsante di loop, il suono verrà riprodotto in loop per cinque secondi e poi si fermerà. Questo plugin funziona solo su un emulatore o un dispositivo mobile.