assetPath and audio file placement

[HunSpeedi]

Description of the bug: In the Readme.md the following is stated:

All audio place in specific platform folder
Andoid: android/app/src/assets
iOS: ios/App/App/sounds

This seems to be incorrect!

Suggestion for a fix: All audio should be placed inside the specific folders: Android: android/app/src/main/assets iOS: ios/App/App/public/assets/

Note: in the case of Android the assethPath is just the filename with the extension like 'sound.mp3' but in the case of iOS you need to specify more details like: assetPath: 'public/assets/sound.mp3'

[lordrepha1980]

It dont works for me. I Placed the Audiofiles in the src-capacitor/ios/App/App/public/assets/ Folder

And my methode call is:

NativeAudio.preload({
                assetPath:'public/assets/NeueNachrichtWav.wav',
                assetId: 'neuefahrt',
                volume: 1.0,
                isUrl: false
            });

Error Message from XCode

[error] - {"errorMessage":"Asset Path is missing - public/assets/NeueNachrichtWav.wav","message":"Asset Path is missing - public/assets/NeueNachrichtWav.wav"}

Sorry i need help.

[nprail]

I am experiencing this issue as well.

[lordrepha1980]

Ok great I am not alone. Where do you placed, your audio files?

[nprail]

It worked when I placed the sound file in the src/assets folder (assuming you are using Angular) so that it is copied to each platform's respective public folders when you run npx cap copy.

Then I was able to use the file like so:

NativeAudio.preload({
    assetPath: 'public/assets/test.mp4',
    assetId: 'test',
    isUrl: false
})

So far I have only tested this on iOS. I assume @HunSpeedi's note about a different path on Android is correct as well.

[HunSpeedi]

@lordrepha1980 If you have followed my instructions under "Suggestion for a fix" it should work. Also if you want it to work on both iOS and Android you need to create an else if :/ Something like this:

if (this.platform.is('android')) {
      NativeAudio.preload({
        assetPath: 'sound.mp3',
        assetId: 'my_sound',
        volume: 1.0,
        audioChannelNum: 1,
      });
    } else if (this.platform.is('ios')) {
      NativeAudio.preload({
        assetPath: 'public/assets/sound.mp3',
        assetId: 'my_sound',
        volume: 1.0,
        audioChannelNum: 1,
      });
    }

[lordrepha1980]

@lordrepha1980 If you have followed my instructions under "Suggestion for a fix" it should work. Also if you want it to work on both iOS and Android you need to create an else if :/ Something like this:

if (this.platform.is('android')) {
      NativeAudio.preload({
        assetPath: 'sound.mp3',
        assetId: 'my_sound',
        volume: 1.0,
        audioChannelNum: 1,
      });
    } else if (this.platform.is('ios')) {
      NativeAudio.preload({
        assetPath: 'public/assets/sound.mp3',
        assetId: 'my_sound',
        volume: 1.0,
        audioChannelNum: 1,
      });
    }

Sorry, it doesn't work.

[HunSpeedi]

@lordrepha1980 And you have checked in your code editor if the files are in the given location within the ios and android folders? Also, made sure that in the device all the sound settings are turned on?

[lordrepha1980]

Sorry, it doesnt work i use Quasar. I have my files into root/src/assets/audio. All Background Audio Services are on.

[nprail]

For me, it seems to only work using the same path on both Android and iOS. Not sure why mine is behaving different than @HunSpeedi.

I did notice that if I place the audio file in a sub-folder of src/assets, Capacitor will flatten the assets folder when copying to each platform.

So for example, if I have a file, src/assets/sounds/sound.mp3 and then run npx cap copy, it will copy the file to these locations instead:

• Android: android/app/src/main/assets/public/assets/sound.mp3
• iOS: ios/App/App/public/assets/swiftly.mp3

And then I can use it like so:

NativeAudio.preload({
  assetId: 'sound',
  assetPath: 'public/assets/sound.mp3',
  audioChannelNum: 1,
  isUrl: false,
});

[Merwan1010]

Something that worked for me (for ios) :

• Open Xcode
• Go to "Build phases"
• On "Copy Bundle ressources" click on the add button (+)
• Click on the button "Add other" and select your .mp3 file (it can be wherever you want inside the ios project)
• Make sure to check "Copy Items if needed", then press "Finish"

Xcode seems to copy the file to the root of the project, you can now load and play the file using the following code :

NativeAudio.preload({
  assetId: "fire",
  assetPath: "fire.mp3", 
  audioChannelNum: 1,
  isUrl: false
});

Tell me if it worked for you !

[HunSpeedi]

For me, it seems to only work using the same path on both Android and iOS. Not sure why mine is behaving different than @HunSpeedi.

I did notice that if I place the audio file in a sub-folder of src/assets, Capacitor will flatten the assets folder when copying to each platform.

So for example, if I have a file, src/assets/sounds/sound.mp3 and then run npx cap copy, it will copy the file to these locations instead:

• Android: android/app/src/main/assets/public/assets/sound.mp3
• iOS: ios/App/App/public/assets/swiftly.mp3

And then I can use it like so:

NativeAudio.preload({
  assetId: 'sound',
  assetPath: 'public/assets/sound.mp3',
  audioChannelNum: 1,
  isUrl: false,
});

I have checked, and my implementation works the same :)

[HunSpeedi]

Sorry, it doesnt work i use Quasar. I have my files into root/src/assets/audio. All Background Audio Services are on.

You need to check if your files are within the ios and android folders! Check out @nprail-s comment, if you repeat the steps that He described it should work! Ps.: Make sure that you check out your root/ios/App/App/sounds and root/android/app/src/assets folders if they contain the desired folder structure and files (if not, just copy them there?!)

[Merwan1010]

For me, it seems to only work using the same path on both Android and iOS. Not sure why mine is behaving different than @HunSpeedi.

I did notice that if I place the audio file in a sub-folder of src/assets, Capacitor will flatten the assets folder when copying to each platform.

So for example, if I have a file, src/assets/sounds/sound.mp3 and then run npx cap copy, it will copy the file to these locations instead:

• Android: android/app/src/main/assets/public/assets/sound.mp3
• iOS: ios/App/App/public/assets/swiftly.mp3

And then I can use it like so:

NativeAudio.preload({
  assetId: 'sound',
  assetPath: 'public/assets/sound.mp3',
  audioChannelNum: 1,
  isUrl: false,
});

In my case Capacitor didn't flatten the directories. One thing which is important if you are using react is to make a build (react-scripts build) and then do npx cap copy.

After doing so the audio files is accessible from the public directory in both android and ios.

[mariusbolik]

If you want to download a mp3 file from a server, store it locally and play it, please see my code example here: https://github.com/capacitor-community/native-audio/issues/39#issuecomment-995176275 Maybe it will help 🙂

[arielhasidim]

Same for me in android. Couldn't preload when asset was in android/app/src/assets, but works in android/app/src/main/assets.

[riderx]

Worked for me with public/ in path, don't need to add your self in android studio or xcode

[lordrepha1980]

this worked fpr me https://github.com/capacitor-community/native-audio/issues/41#issuecomment-961675730 thank you guys

[kyoz]

@nprail's solution work for me, just one different is it not flatten my sounds folder. (I'm on ionic 6 and capacitor 3.4.1)

Assume you place your sounds in src/assets/sounds/bang.wav

Then run:

ng build
npx cap copy

Ensure you won't forgot ng build command, or else it will copy the old assets folder and there is no sounds folder you've just added.

Then you can load it with something like:

NativeAudio.preload({
  assetId: 'bang',
  assetPath: `public/assets/sounds/bang.wav`,
  audioChannelNum: 1,
  isUrl: false
});

Hope it help :cat:

[HarelM]

I'm using Android, iOS and web with hopefully the same code. I place my mp3 file under src/contect/music.mp3 of my angular project which get copied to both platforms. I don't want to place it in a different place since I would like to use it in my web page and not duplicate it (DRY principle). Since Android works for me only with public/content/music.mp3 I need to set different folders for Android and web (I haven't got to try iOS yet). I would expected the native plugin to try and use my files in the public folder if I give it relate path and not absolute path and by that allowing to use the same code for all platforms. i.e I expect the following to work in all platforms (including web):

NativeAudio.preload({
  assetId: 'music',
  assetPath: `content/music.mp3`, // relative path to base URL on server and public folder on native
  isUrl: false
});

As far as I understand, this is currently not the case. There's also some "if" related to content folder which I didn't understand... https://github.com/capacitor-community/native-audio/blob/b13bd911df773802c340a7d69b7179dcf5ed7651/android/src/main/java/com/getcapacitor/community/audio/NativeAudio.java#L449 This seems like a special way to get a resource, but I would expect it to be something like content: so that it doesn't mix with the relative folder hierarchy.

Let me know if there's anything I can do to help solve this (e.g. PR etc) I think the general assumption in this thread is that the plugin should be able to better find the files, without the internal knowledge (i.e. public folder) of how capacitor works (IMHO at least).

[vicatcu]

In Android how I figured out what the path should be is by finding the audio file in the assets folder in the project file tree in Android Studio, right clicking on it, choosing "Copy Path / Reference", then choosing "Path from Source Root". Put that in my code, and presto I hear a sound played.

[riderx]

i have publish npm i @capgo/native-audio who takes the path of file in your build folder. https://github.com/Cap-go/native-audio