Ionic-native: Ionic v4: NativeAudio

[smartifier-salomaa]

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://ionicworldwide.herokuapp.com/

Current behavior:
The asset (sound) files cannot be found.

To Native Cordova ->  NativeAudio preloadComplex NativeAudio1847231754 ["options": [starting, assets/audio/beep_2.wav, 1, 1, 0]]

[error] - Unhandled Promise rejection: (NATIVE AUDIO) Asset not found. (assets/audio/beep_2.wav) ; Zone: <root> ; Task: setTimeout ; Value: (NATIVE AUDIO) Asset not found. (assets/audio/beep_2.wav) undefined

The sound files are placed in [projectDir]/src/assets/audio/. I have tried multiple variations of the path without any luck. This path used to work in Ionic v3.

Other information:

"@ionic-native/native-audio": "^5.0.0-beta.15",
"cordova-plugin-nativeaudio": "^3.0.9",

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.7
   @capacitor/core           : 1.0.0-beta.7

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (1 plugins total)

System:

   ios-deploy : 1.9.2
   NodeJS     : v8.11.3 (/usr/local/bin/node)
   npm        : 6.4.1
   OS         : macOS High Sierra
   Xcode      : Xcode 9.4.1 Build version 9F2000

[dm-AS]

+1

Still exists in beta 22

[denikov]

Got it working with bundled files under 'projectRoot/assets/' and under 'projectRoot/src/assets/' but cannot get it to work with downloaded files to 'dataDirectory' or 'documentsDirectory'.

`Ionic:

ionic (Ionic CLI) : 4.12.0 (/Users/home/.npm-packages/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.3.1
@angular-devkit/build-angular : 0.13.8
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.3.8
@ionic/angular-toolkit : 1.4.1

Cordova:

cordova (Cordova CLI) : 8.1.2 ([email protected])
Cordova Platforms : ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 1.2.1, (and 11 other plugins)

System:

Android SDK Tools : 26.1.1 (/usr/local/share/android-sdk)
ios-deploy : 1.9.4
NodeJS : v10.15.3 (/usr/local/bin/node)
npm : 6.9.0
OS : macOS Mojave
Xcode : Xcode 10.2.1 Build version 10E1001`

constructor(public nativeAudio: NativeAudio) { nativeAudio.preloadComplex('song', 'assets/song.mp3', 1, 1, 0) .then(data => { console.log(data); }, err => { console.log(err); }); } playSong: void { this.nativeAudio.play('song') .then(success => { console.log('playing'); }, err => console.log(err)); }

If anyone can suggest how to play downloaded files while using '--livereload', would be grateful!!!

[tunggad]

Short: the underlying cordova plugin is not compatible with ios project structure capacitor created, so you have to fix the native code of the cordova plugin.

Solution:
In my case, after searching the internet and didn't find anything help to solve this Asset not found problem while calling preloadSimple, i then digged into native code of the underlying cordova plugin - ios/capacitor-cordova-ios-plugins/sources/CordovaPluginNativeaudio/NativeAudio.m and see the line 87: NSString* basePath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"www"]; then i changed the line to NSString* basePath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"public"];, then execute npx cap copy ios again and it works. It was the fix. Reason: capacitor does not place the js files and assets folder under www but public.

[alaswer]

Short: the underlying cordova plugin is not compatible with ios project structure capacitor created, so you have to fix the native code of the cordova plugin.

Solution:
In my case, after searching the internet and didn't find anything help to solve this Asset not found problem while calling preloadSimple, i then digged into native code of the underlying cordova plugin - ios/capacitor-cordova-ios-plugins/sources/CordovaPluginNativeaudio/NativeAudio.m and see the line 87: NSString* basePath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"www"]; then i changed the line to NSString* basePath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"public"];, then execute npx cap copy ios again and it works. It was the fix. Reason: capacitor does not place the js files and assets folder under www but public.

Perfect!!!

[Sh1n1x]

Thanks it's working fine with this modification on iOS. But for Android we must make the same change as you can see:

Open this file: android/capacitor-cordova-android-plugins/src/main/java/com/rjfun/cordova/plugin/nativeaudio/NativeAudio.java and you see on the line 85: String fullPath = "www/".concat(assetPath); then change with String fullPath = "public/".concat(assetPath);.

Next execute npx cap copy android and it's working fine now! 👍

[ollwells]

So glad to have found this and figure out this issue!

I didn't want to modify the plugin so instead added a symlink from assets/www/ to assets/public/. This also fixed the issue for me on android.

[cordial]

So glad to have found this and figure out this issue!

I didn't want to modify the plugin so instead added a symlink from assets/www/ to assets/public/. This also fixed the issue for me on android.

I presume you mean inside the android app main/assets/public as opposed to /assets/public at root?

[smartifier-salomaa]

Hi! There has been good suggestions and also it looks like some have been able to get this working. I picked up this old project and thought to continue it. But I'm still having the same issue. I have updated the plugin folder name (from www to public). But still this doesn't work for me.

I'm using the following line to load the file:
this.nativeAudio.preload('starting', 'assets/audio/beep_2.wav', 1, 1, 0);

I tried starting with / but that didn't work either. I.e.:
this.nativeAudio.preload('starting', '/assets/audio/beep_2.wav', 1, 1, 0);

If you have been able to get it working, would it be possible to post here as detailed guide as possible? Including also the file paths etc.

Thanks for your help!

[cordial]

hey. I recently got this working (in react ionic but same principles). I'm not sure your problem is relating to the folder names (I used the simlink option to get over this), as you're using an incorrect method name? The choices (in angular) are -

this.nativeAudio.preloadSimple('uniqueId1', 'path/to/file.mp3').then(onSuccess, onError);
this.nativeAudio.preloadComplex('uniqueId2', 'path/to/file2.mp3', 1, 1, 0).then(onSuccess, onError);

Did you not have simple/complex in your code or were you just paraphrasing?

btw - I've since realised this project isn't maintained any more (it seems). If I had the time, I'd probably try and use howler.js instead.

[smartifier-salomaa]

I finally found the root cause. I had an extra layer of code that internally used preloadComplex...like this:
this.nativeAudio.preloadComplex('uniqueId2', 'path/to/file2.mp3', 1, 1, 0).then(onSuccess, onError);

But I forgot that there are two different functions for loading files so when I updated the folder name in plugins, I had updated only one of them (preloadSimple) and that's why it didn't have any impact as I had used preloadComplex.

So for those who are still struggling with this in the future:

1. Either create a symlink from assets/www/ to assets/public/ as @cordial suggested or
2. Or edit the plugin source codes and change directories from www to public as suggested by @tunggad and @Sh1n1x

[cordial]

Ah ok, yes sorry I forgot to mention that (and also did that too). There are two methods in the native library.

I had a problem with the plugin source codes route, in that when I synced the native/react projects the native library change would be getting overwritten. Although this is possibly just a noob issue as I haven't been using Ionic that long.

[VictorioBerra]

This is still broken for me on ionic 5+

  "dependencies": {
    "@capacitor/android": "^2.4.3",
    "@capacitor/core": "2.4.3",
    "@ionic-native/core": "^5.30.0",
    "@ionic-native/device-motion": "^5.30.0",
    "@ionic-native/native-audio": "^5.30.0",
    "@ionic-native/vibration": "^5.30.0",
    "@ionic/vue": "^5.4.0",
    "@ionic/vue-router": "^5.4.0",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-device-motion": "^2.0.1",
    "cordova-plugin-nativeaudio": "^3.0.9",
    "cordova-plugin-vibration": "^3.1.1",
    "core-js": "^3.6.5",
    "lodash": "^4.17.20",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0"
  },
  "devDependencies": {
    "@capacitor/cli": "2.4.3",
    "@types/jest": "^24.0.19",
    "@types/lodash": "^4.14.165",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "@vue/eslint-config-typescript": "^5.0.2",
    "@vue/test-utils": "^2.0.0-0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "typescript": "~3.9.3",
    "vue-jest": "^5.0.0-0"
  },

[cordial]

did you manually edit like the methods above or try the simlink method?

[mikelhamer]

plz fix