Учебники

Ionic — Cordova Native Audio

Сентябрь 12, 2018

Этот плагин используется для добавления собственных звуков в приложение Ionic.

Использование родного аудио

Чтобы иметь возможность использовать этот плагин, нам сначала нужно его установить. Откройте окно командной строки и добавьте плагин Cordova. 

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

Прежде чем мы начнем использовать этот плагин, нам понадобится аудиофайл. Для простоты мы сохраним наш файл click.mp3 в папке js , но вы можете разместить его где угодно.

Следующим шагом является предварительная загрузка аудиофайла. Доступны два варианта:

  • preloadSimple — используется для простых звуков, которые будут воспроизводиться один раз.

  • preloadComplex — это для звуков, которые будут воспроизводиться как циклические звуки или фоновый звук.

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>

Когда мы нажимаем на кнопку воспроизведения, мы слышим звук один раз, а когда мы нажимаем на кнопку петли, звук будет повторяться в течение пяти секунд, а затем останавливаться. Этот плагин работает только на эмуляторе или мобильном устройстве.

46
Share: