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>

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