Ionic Native Audio Deprecated and Unmaintained?

Ionic Native
1

My app uses ionic-native-audio to play hundreds of short (3-10 second) MP3 files. I have been using preloadSimple for the files on ionViewDidLoad and then playing with a tap event.

I did plenty of testing of playback and unloading in Xcode simulator across devices and iOS versions and everything was working fine.

As posted in other threads I’m doing final optimizations to my ionic app, and a few days ago I got my Apple dev account and put my app on my iPhone for the first time, only to be surprised that the audio plugin is deprecated and unmaintained and broken on my device with respect to playback volume.

There are 138 stars on the github repo and many dozens of open issues so I would imagine that there are many hundreds of devs using this plugin, but since the maintainer doesn’t seem to be active what are are my best solutions to this problem? Does the ionic team do any development or maintainence on ionic-native plugins? Should I install a new plugin and rewrite all of my typescript?

Thanks in advance for any advice,
Evan

2

The Ionic Native team does maintenance and development on the Ionic Native plugin.
The Cordova plugin, that is used by the Ionic Native plugin, is developed by different people.

Are you talking about https://ionicframework.com/docs/native/native-audio/ and https://github.com/floatinghotpot/cordova-plugin-nativeaudio?

1 Like
3

I actually believe that those are one and the same. The ionic documentation that you linked, which I used to install native-audio, links to your second URL/github repo by floating hotpot.

Sorry if I’m wrong - I might just be confused…

Edit: my package.json dependency is ionic-native/native-audio and not Cordova-plugin-native-audio, of that is at all helpful.

4

Cordova plugins use a callback protocol that does not exactly function smoothly with Angular 2 apps, specifically zone.js. The purpose of Ionic-Native is to provide a shim between the raw plugin that exposes things as Promises instead of taking callback arguments, making them much easier to integrate in your app. So think of it as two different layers of the same feature.

1 Like
5

Ok so I understand that there are issues in using Cordova plugins but shouldn’t the ionic-native plugin function pretty flawlessly in my app? Or is the ionic-native-audio really just a different name for the Cordova-native-audio plugin?

Sorry I’m a little confused, I’m quite a novice developer!

6

I would not say “a different name for” as much as “a layer on top of”. The only reason this distinction really matters is whether you want to file bugs against ionic-native or against the plugin itself. I haven’t used that particular plugin.

1 Like
7

Ok thanks for the clarification. I already found a github issue with the Cordova plugin that describes my problem but it’s 8 months old and hasn’t had any activity.

I guess I’ll do some searching and see if there is a different plugin that I can use for playing small, locally stored audio files…

8

I would give the Media plugin a look.

1 Like
9

I had given it a glance a while back when I decided to go with native-audio because I thought media was more for playing files from a server instead of ones stored locally, but I’ll give it another read through tonight.

Thanks again for the explanation and advice!

10

Yes, I just wanted to make sure as “Ionic Native Audio” could mean a lot of things and you didn’t provide specific library or package names or links to the stuff you are using.

Where did you get that information? cordova-plugin-nativeaudio is actively mantained, so maybe try to get that issue rolling again. Maybe create a small project that exactly shows the problem you are having.

What exactly is wrong with playback volume? You didn’t actually describe your problem.

11

OK so I don’t mean to be hyperbolic when I say that Cordova-nativeaudio is unmaintained since floatinghotpot does make the occasional commit but there are over 70 issues open on the github repo and many open issues still seem to exist over a year after opening, while many commits made over the last few months are ‘updating the readme’ and ‘fix headline markdown’ (not substantial fixes to real issues).

One user opened a rather comprehensive pull request to fix a number of issues a month ago and it still hasn’t been merged or commented on by hotpot, another point that led me to the conclusion that the plugin wasn’t getting the attention it needs.

As for my personal issue, I didn’t post it here since I wasn’t sure that it was appropriate on this forum. I found a github issue opened 9 months ago that seemed to describe the problem on my device and I commented on that github issue the following:

"Same issue for me - audio playback of simply loaded file on iOS 10 starts at full volume no matter what the phone volume is set to.

Adjusting during playback will set volume to the correct level mid-playback but as soon as you play a new file or replay a file it will be full volume again, rendering this plugin unusable for the moment."

I appreciate you taking the time to give advice - I could make a small sample project that loads a file and plays it, but it would mean hotpot needs to build and load the project onto an iPhone or iPad to reproduce the issue, since volume control works fine in the simulator.

I’ll keep an eye on the github and hope that the issues get fixed. I really liked setting up the nativeaudio plugin in my project - it made it super easy to load, play, and unload local files even for a novice developer like me. I was just surprised that it didn’t work on my device like it did in the simulator!

12

One way to get around “unresponsive” maintainers is to fork the repo and apply the PRs to your fork (several different explanations here http://stackoverflow.com/questions/6022302/how-to-apply-unmerged-upstream-pull-requests-from-other-forks-into-my-fork)

For reference, the problem you seem to be having is here:

1 Like
13

Yep my github account is EWBears and that’s my comment made yesterday on the link that you shared.

I could fork the repo and merge the PR made by MartinDomig but I’m unable to intelligently review the existing code or proposed changes, so I would prefer to wait for an update on the existing repo and just updating via npm.

I understand now that the ionic team doesn’t maintain the Cordova plugin side of things, only the layer on top of it, but I wish that there was some level of oversight to ensure that ionic-native builds atop a working plugin, since ultimately the ionic name/brand will be associated with it.

I’ll just try to be patient and see what happens on the github repo and continue to search for other solutions in the interim.

14

Yeah I was linking this here only for other, future people to find when they will stumble upon this topic while googling for similar problems with the same plugin :wink:

Actually, most of the work on Ionic Native is covered by the community as well - 99% of the commits there are by people working on it in their free time. They implement as many plugins that are requested as possible - to make sure they are usable with Ionic.

Deciding which of those to use then has to be the decision of the app developer - it is almost impossible to “certify” or “evaluate” all use cases of a Cordova plugin.

15

I was unable to get Ionic Media to work so went with NativeAudio, I created a component NativeAudioComponent. When I run the code in DevApp, I get a java.io.FileNotFoundException. When I run the apk it works fine. The component looks like this:

import { Component, Input, OnInit, OnDestroy } from '@angular/core'
import { Platform } from 'ionic-angular'
import { NativeAudio } from '@ionic-native/native-audio'

@Component({
  selector: 'native-audio',
  templateUrl: 'native-audio.html'
})
export class NativeAudioComponent implements OnInit, OnDestroy {

  @Input() resource: any

  error: any
  id: string
  playing: boolean = false
  status: any
  volume: number = .5

  constructor(private nativeAudio: NativeAudio, private platform: Platform) { }

  ngOnDestroy() {
    if (this.id) {
      this.nativeAudio.unload(this.id)
        .then((status: any) => { this.status = status })
        .catch((error: any) => { this.error = error })
    }
  }

  ngOnInit() {
    this.platform.ready()
      .then((status: any) => {
        this.status = status
        this.id = new Date().toISOString()
        this.nativeAudio.preloadComplex(this.id, 'assets/audio/' + this.resource.file, 1, 1, 0)
          .then((status: any) => {
            this.status = status
            this.setVolume()
          })
          .catch((error: any) => { this.error = error })
      })
      .catch((error: any) => { this.error = error })
  }

  play() {
    if (this.id) {
      this.nativeAudio.play(this.id)
        .then((status: any) => {
          this.status = status
          this.playing = true
        })
        .catch((error: any) => { this.error = error })
    }
  }

  setVolume() {
    if (this.id) {
      this.nativeAudio.setVolumeForComplexAsset(this.id, this.volume)
        .then((status: any) => { this.status = status })
        .catch((error: any) => { this.error = error })
    }
  }

  stop() {
    if (this.playing) {
      this.nativeAudio.stop(this.id)
        .then((status: any) => {
          this.status = status
          this.playing = false
        })
        .catch((error: any) => { this.error = error })
    }
  }
}