Ionic Native Audio


此插件用于向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>

当我们点击播放按钮时,我们将听到一次声音,当我们点击循环按钮时,声音将循环五秒然后停止。此插件仅适用于模拟器或移动设备。