[P] Infinite Shelter

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.

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.

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:

<audio controls autoPlay ><source src={local_url} type="audio/mpeg" /></audio>

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