Storing mp3 file in app's file system, in Ionic v4, and reading and playing them

I am trying to do something which I feel should not be too difficult: download mp3 files, store them “locally”, and then make them available for a user to play. But, wow, I am really having problems…

I am successfully downloading the mp3 files from Firestore – at least as far as I can tell. And, I feel like I’m storing them in the “Data” directory – certainly it seems like they are there when I run my app in a browser, and use the debugging console to see the storage system. See image below.

However, I’ve been unable to figure out how to read the 1.mp3 file in from that location and play it, either with an html <audio> tag or using Javascript Audio stuff or with cordova media stuff. The errors that come back usually so are obscure that you cannot tell if you are not reading the file correctly or have saved the file in a bad format or have not been able to find the file in the file system.

Can anyone help me? Do you have any suggestions on how to tell if the file is in a good format and/or how to read the (binary) file in and play it?

(Note: here are all the things I have been able to do successfully:

  1. Play an audio file that is stored in assets.
  2. Download json files from the web and store then in the Data directory.
  3. Read json files in from the Data directory and process them.
    )

Frustratedly yours,

Vic

So, I was doing quite a few things wrong. Thanks for jcesarmobile on the Capacitor slack channel for helping me out.

I’ve made available a repository that shows how to solve my problems. Look in home.page.ts and code.ts for my solutions, in https://github.com/VictorNorman/AudioPlayFromData

1 Like

Pls how can I bind audio with images in ionic slide such that when I click next it will slide to the right page and sound