(NATIVE AUDIO) Asset reference does not exist

I’m using Native Audio on iOS and I’m getting this error:

(NATIVE AUDIO) Asset reference does not exist.

I’m using Firebase storage to store my short mp3 sound file. I’m loading the file from app.components:

this.audioProvider.preload('clickSound', 'https://firebasestorage........');

Any idea what is wrong here? Many thanks!

2 Likes

Documentation does seem to indicate that you can use a URL for the asset path, but I have no experience with that. I’ve been using the plugin in my app and it seems to work fine for playing locally stored audio.

Why did you define a provider instead of just loading the plugin and using the this.nativeAudio.preload call?

Yes, I’ve got a provider. I’ ve also read that it only work with local files, despite the docs saying ottherwise

What is this

or

you are referring to?

Native Audio is this Ionic plugin:

audioProvider is my provider which is just this:

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { NativeAudio } from '@ionic-native/native-audio';

@Injectable()
export class AudioProvider {

  sounds: any = [];

  constructor(private nativeAudio: NativeAudio, public http: Http) { }

  preload(key, asset) {
      this.nativeAudio.preloadSimple(key, asset);
      let audio = {
        key: key,
        asset: key,
        type: 'native'
      };
      this.sounds.push(audio);
  }

  play(key) {
    let audio = this.sounds.find((sound) => {
      return sound.key === key;
    });
      this.nativeAudio.play(audio.asset).then((res) => {
        console.log(res);
      }, (err) => {
        console.log(err);
      });
  }
}

I fixed the topic category then.

Is your audio URL reachable without any authentication?
Does it work without a provider but implemented directly?
Does your provider work with a local file?

Also post your ionic info output please.

  • Yes, reached without any authentication (firebase storage downloadable URL)
  • Yes, tried directly without a provider, still doesn’t work
  • Haven’t tried a local file yet to be honest

cli packages:

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

global packages:

cordova (Cordova CLI) : 7.0.1 

local packages:

@ionic/app-scripts : 2.1.3
Cordova Platforms  : ios 4.4.0
Ionic Framework    : ionic-angular 3.6.0

System:

ios-deploy : 1.9.0 
ios-sim    : 5.0.12 
Node       : v7.10.0
npm        : 4.2.0 
OS         : macOS Sierra
Xcode      : Xcode 9.0 Build version 9A235 

Misc:

backend : legacy

Then try that first.
It should also first work without a provider before you try to add that abstraction.

I face this problem too.

I cant get my mp3 with my own webUrl.

When I console the error, it show www/“blablabla”

It automatic add www/ infront of my assetUrl

how to improve this, it make me confuse.

I haven’t fixed it yet, but from what I’ve learnt, you need to load the Audio file within the App locally, then it works. The audio file can’t be stored on a remove server (like Google Firebase storage).

How did you fix this @dimitri320?

Did you manage to solve this? The documentation states that you can load a url instead of a file, but I’m stuck at this problem too
error: java.io.FileNotFoundException: www/{audioUrl}

Hi @cuble,

I didn’t, so I moved to Media:

  playAudio(id) {
    if (this.plt.is('ios')) {
      if (this.playing == true && this.audioPlaying != id) {
        this.file.stop();
        this.file = this.media.create('assets/audio/' + id + '.mp3');
        this.file.play();
        this.audioPlaying = id;
        this.playing = true;
        console.log("I'm an iOS device!");
      } else {
        //this.file = this.media.create('assets/audio/' + id + '.mp3');
        //  this.file.stop();
        this.file = this.media.create('assets/audio/' + id + '.mp3');
        this.file.play();
        this.audioPlaying = id;
        this.playing = true;
      }
    } else {

      if (this.playing == true && this.audioPlaying != id) {
        this.nativeAudio.stop(this.audioPlaying);
        this.nativeAudio.play(id)
        console.log("MUSICPLAYING changed play" + id);
        console.log("stopped this", this.audioPlaying);
        this.audioPlaying = id;
        this.playing = true;
      } else {
        this.nativeAudio.play(id)
        this.audioPlaying = id;
        this.playing = true;
        console.log("MUSICPLAYING new play" + 'assets/audio/' + id + '.mp3');
        console.log(this.audioPlaying);
      }
    }
  }

I got it to work with mp3 files on IOS and ANDROID (and WEB/HTML5) by wrapping the preloadSimple and play methods in cordova ready, AND fixing a bug in the Josh Morony tutorial. He was passing the asset path to the play method, and should be passing the key instead. Here is my solution:


I call the preload on each page where a sound is played, so it’s very modular.

2 Likes

did u got any answer

I finally got to the bottom of the java.io.FileNotFoundException: www/{audioUrl} issue.

The answer was linked in (NATIVE AUDIO) Asset not found IOS 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 android main/assets location.

See this issue for more info: