[P] Infinite Shelter

h2. Skills required: javascript, Capacitor, hybrid Android

Working in this repo, in this file: https://github.com/wasya-co/scratchpad3jsx/blob/master/src/App2.jsx

create functionality to (1) download and save an mp3 file, and (2) play it.

h2. Download and save.

For dev/testing, you can use this file that has open CORS permissions: https://manager.piousbox.com/test1.mp3

either fetch or axios can be used for downloading the file. You can use module capacitor-blob-writer, although I didn't get it to work. You can use Capacitor's own Filesystem.writeFile, although I didn't get it to work either.

Note: I haven't figured out the encoding. an mp3 file is a binary file, so in js it will be either a blob or an arrayBuffer. And it has to be saved in such a way as to be playable. When I converted it to base64 encoding, it was not playable so it has to be saved as a binary stream, or something.

h2. playback.

Playback must be done with a local file! Playing back a remote file is trivial, however the point of this exercise is to avoid using bandwidth. Only a local filesystem file must be played.

One choice is to use the html audio element:

That hasn't worked for me, b/c when I save the file, it doesn't have an absolute path. If you can figure out how to get the absolute path of the saved file, this approach may work.

Another approach is to use @capacitor-community/native-audio module. I believe this will work, as soon as the file is saved as playable (saving in base64 made it not-playable).

References:

• file saving: https://capacitorjs.com/docs/apis/filesystem
• playback: https://github.com/capacitor-community/native-audio

Note: to build, you need to have xcode (if you're on mac), jdk with java 11 (java 19 didn't work for me), and android studio. The build steps are:

yarn
npx cap sync
npx can open android
npx can run android