Task #2844
Updated by victor piousbox over 1 year ago
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:
<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), xcode, 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
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:
<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), xcode, 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