At $work we have started a project using Ionic and Ionic Native. I didn't have any experience with it so I decided to make something fun and simple. I often play little song snippets during meetings so I decided to make a soundboard. There's a project on Github that was pretty similar to what I wanted so I took a couple key pieces from it and started creating a little app.
Initially I was thinking I would have to utilize native file access and that would require platform detection. After a few experiments, I found that getting the sound files to open on multiple platforms using the native file access would require a lot of specific setup and paths that ruined the simplicity I was hoping for. Then, I looked into bundling assets as you would on the web and found a stackoverflow answer that pointed me in the right direction. If you put your resources in src/assets/ they will be bundled and easily accessible with a simple path, for example:
assets/sound/blah.mp3
I'm using the Typescript Audio wrapper for HTMLAudioElement, so with your assets in place, it is simple to play a clip:
this.media = new Audio('assets/sound/blah.mp3');
this.media.load();
this.media.play();
I tested with both mp3 and wav files and they both worked across platforms. Building and testing on the web was simple, Android was very simple, but iOS required a bit of work to get right. The ionic deployment guide was close, but I still needed a couple tweaks to get it up and running.
Once I had the basics, I needed some content and I decided to create a bunch of clips that were inside jokes so it would be fun to play with at $work. There is an extremely simple, open-source tool for building mp3 clips called mp3cut. For example, to create a two second clip starting at 29 and finishing at 31 seconds from input.mp3 written to output.mp3:
mp3cut -o output.mp3 -t 00:00:29+000-00:00:31+000 input.mp3
There were also a few phrases I wanted to add that weren't related to songs. If you work on MacOS, you can also use the say command to make witty clips, like so:
say -v Daniel "Witty" -o witty.wav --data-format=LEF32@8000
The output sounds great even though all the fun voices (who doesn't want Trinoids?) have been removed from the default install and have to be downloaded. If you want more voices head to Accessibility > Speech > System Voice > Customize and select all those you want.
Ionic is easier and more productive than any cross platform app development framework I've used in the past. My initial experiment with it went well and I think it is a viable choice for simple apps. I still believe hybrid or native apps should be used as complexity increases, but will keep Ionic in mind for future app projects.