CODEWITHSUNDEEP
cordovaionic4
garyc2232
garyc2232

Reputation: 65

ionic 4 Native Audio cant find my mp3 files

I try to use @ionic-native/native-audio with below code to load my mp3 files

https://ionicframework.com/docs/native/native-audio/

this.nativeAudio.preloadSimple(‘sound2’, ‘assets/sound2.mp3’.then(() => {
  console.log(‘preload success’)
}, (err) => {
  console.log(err);
});

However i get a error when preload the mp3 java.io.FileNotFoundException: www/assets/sound2.mp3 I am sure the sound2.mp3 is placed in both /src/assets/sound2.mp3 and www/assets/sound2.mp3 Anyone got any ideas on it?

Upvotes: 1

Views: 4978

Answers (5)

pavelety
pavelety

Reputation: 874

Faced the same issue with Ionic 6.18.1, [email protected] and Capacitor 3.3.2. Such issues with old Cordova plugins are regular so better to add a hook with a fix, so no need to change it manually after every sync.

Add to package.json in the scripts block:

"capacitor:sync:after": "node ./scripts/fix-audio-plugin.js"

Add a new file to scripts/fix-audio-plugin.js:

const fs = require("fs");

const fixPathInFile = (filePath) => {
  let content = fs.readFileSync(filePath, 'utf8');
  if (content) {
    let replaced = false;
    content = content.replaceAll('www', () => {
      replaced = true;
      return 'public';
    });
    if (replaced) {
      fs.writeFileSync(filePath, content);
    }
  } else {
    console.error('file NativeAudio not found!');
  }
}

if (process.env.CAPACITOR_PLATFORM_NAME === 'android') {
  let filePath = './android/capacitor-cordova-android-plugins/src/main/java/com/rjfun/cordova/plugin/nativeaudio/NativeAudio.java';
  fixPathInFile(filePath);
} else if (process.env.CAPACITOR_PLATFORM_NAME === 'ios') {
  let filePath = './ios/capacitor-cordova-ios-plugins/sources/CordovaPluginNativeaudio/NativeAudio.m';
  fixPathInFile(filePath);
}

Run ionic cap sync afterwards.

Upvotes: 3

David Lopes
David Lopes

Reputation: 277

quick fix

go to: "your-app\android\capacitor-cordova-android-plugins\src\main\java\com\rjfun\cordova\plugin\nativeaudio\NativeAudio.java"

then: change the code line

String fullPath = "www/".concat(assetPath)

to

String fullPath = "public/".concat(assetPath);

Upvotes: 2

mani kandan
mani kandan

Reputation: 439

Sometimes we went into plugin issues of this type of category. To solve it we must edit native code inside source folder.

  1. Capacitor uses "public/..." instead of "www/..." (which was used by cordova).
  2. Hope you are in capacitor project.
  3. Go to {project_folder}/node_modules/cordova-plugin-nativeaudio/src/android.
  4. Open NativeAudio.java. Search for "String fullPath" and replace the "www" with "public". Run "ionic cap sync android".
  5. That's it. Now your file is accessible inside native app.

And a question. I am unable to play mp3 file. But wav file works. How it works?

Upvotes: 0

Ollwells
Ollwells

Reputation: 1

Sounds like https://forum.ionicframework.com/t/native-audio-asset-not-found-ios/78817/16 which said this.

Solution Cordova Native Audio plugin expects an assets "www" folder. But in an Ionic Capacitor project it’s named "public". As the plugin has this value hard coded, the solution in the link below tells you to dive in the plugin source code inside each platform and replace “www” with “public”.

Alternatively add a symlink from the "www" folder to the "public" folder in the platform main/assets location.

See this issue for more info: https://github.com/ionic-team/ionic-native/issues/2685

Upvotes: 0

Abdel_91
Abdel_91

Reputation: 59

Try this to access 'www/assets' for Android device:

let filePath = this.file.applicationDirectory + 'public/assets/';

If not working try to copy file before with the File Cordova Plugin:

import { File } from "@ionic-native/file/ngx";

constructor(private file: File) { }


yourFonction(){
if(this.platform.is('android')){
  let filePath = this.file.applicationDirectory + 'public/assets/';

  this.file.copyFile(filePath, fileName, this.file.externalCacheDirectory, fileName)
    .then( () => alert('File copied in :' +  this.file.externalCacheDirectory))
    .catch(e => alert("Error copying file => " + JSON.stringify(e));

    //then perform audio preload accessing the copied file in device storage

}else{
    IOS device action...
}

Upvotes: 0

Related Questions