Ionico - Cordova Media

Questo plugin ci consente di registrare e riprodurre file audio su un dispositivo.

Utilizzo dei media

Come con tutti gli altri plugin Cordova, la prima cosa che dobbiamo fare è installarlo dalla finestra del prompt dei comandi.

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

Ora siamo pronti per utilizzare il plugin. Nell'esempio di codice seguente,srcè il file mp3 sorgente che useremo per questo tutorial. È posizionato injs cartella, ma dobbiamo aggiungere /android_asset/www/ prima, quindi può essere utilizzato su dispositivi Android.

La funzionalità completa è racchiusa all'interno di $ionicPlatform.ready()per garantire che tutto venga caricato prima che il plugin venga utilizzato. Successivamente, stiamo creando il filemedia oggetto utilizzando il newMedia(src)metodo. Ilmedia viene utilizzato per aggiungere funzionalità di riproduzione, pausa, interruzione e rilascio.

Codice controller

.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();
      });
   });
}

Creeremo anche tre pulsanti per richiamare le funzioni di riproduzione, pausa e interruzione.

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

<button class = "button" ng-click = "pauseMedia()">PAUSE</button>

<button class = "button" ng-click = "stopMedia()">STOP</button>

Abbiamo bisogno di eseguirlo su un emulatore o un dispositivo mobile affinché questo plugin funzioni. Quando l'utente tocca il pulsante di riproduzione, il filesong.mp3 inizierà a giocare.

Puoi vedere nell'esempio sopra che usiamo srccome parametro di opzione. Ci sono altri parametri opzionali che possono essere usati pernewMedia metodo.

Parametri opzionali

La tabella seguente mostrerà tutti i parametri opzionali disponibili.

La tabella successiva mostrerà tutti i metodi disponibili.

Metodi disponibili

La tabella seguente mostrerà tutti i metodi disponibili.