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>

当我们点击播放按钮时，我们会听到声音一次，当我们点击循环按钮时，声音将循环五秒钟然后停止。此插件仅在模拟器或移动设备上有效。