Ionic - Cordova 原生音訊

此外掛用於向 Ionic 應用新增原生音訊聲音。

使用原生音訊

要能夠使用此外掛，我們首先需要安裝它。開啟命令提示符視窗並新增 Cordova 外掛。

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

在開始使用此外掛之前，我們需要音訊檔案。為簡單起見，我們將把我們的 click.mp3 檔案儲存在 js 資料夾中，但您可以將其放在任何位置。

下一步是預載入音訊檔案。有兩個選項可用，它們是 -

• preloadSimple - 用於將播放一次的簡單聲音。

• preloadComplex - 用於將作為迴圈聲音或背景音訊播放的聲音。

將以下程式碼新增到您的控制器以預載入音訊檔案。我們需要確保在預載入音訊檔案之前 Ionic 平臺已載入。

控制器程式碼

$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);
   });
});

在同一個控制器中，我們將新增播放音訊的程式碼。我們的 $timeout 函式將在五秒後停止並解除安裝迴圈音訊。

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

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

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

我們需要做的最後一件事是建立播放和迴圈音訊的按鈕。

HTML 程式碼

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

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

當我們點選播放按鈕時，我們會聽到聲音一次，當我們點選迴圈按鈕時，聲音將迴圈五秒鐘然後停止。此外掛僅在模擬器或移動裝置上有效。