Help playing local audio via html5 audio?

Ionic Framework ionic-v3
1

Hey everyone,

I’ve been using the ionic native - native audio plugin to preload and play short audio files in my app, but the cordova-plugin that it’s based on is unmaintained and I’m hoping to move away towards html5 audio.

I don’t need background audio or controls, since the audio in my app is short 1-3 second clips. Is there any easy way to just play a short audio track on a button tap?

I’m trying to do something this

HTML:

<button (tap)="play1()">Button 1</button>
<button (tap)="play2()">Button 2</button>
<button (tap)="play3()">Button 3</button>

TS:

var audio1 = new Audio("assets/aud/audio1.mp3");
var audio2 = new Audio("assets/aud/audio2.mp3");
var audio3 = new Audio("assets/aud/audio3.mp3");

play1() {
audio1.play();
}

play2() {
audio2.play();
}

play3() {
audio3.play();
}

Is this anything close to a good solution? Anything that I need to look out for with respect to unloading the files from memory? Sorry if this is a dumb question but the documentation for html5 audio that I’ve found is all aimed at the web and I can’t find any examples for ionic specific implementations…

1 Like
2

Tried this?

Native Audio plugin (that is if you build hybrid apps)

1 Like
3

That’s the plugin that I currently use and that I’m trying to move away from. I have a few thousand android users and get around 10 error reports per month from the underlying Cordova plugin. It’s a fairly small number, a fraction of a percent of all sessions, but I’d still prefer 0 crashes and to move to web technologies so that I might be able to release a PWA in the future.

Floatinghotpot (maintainer of the Cordova plugin) hasn’t merged a PR for months and doesn’t seem interested in working any further in Cordova native audio. It still works now but I’d prefer to switch early before a breaking change comes along with Android P or iOS 12 that forces me to adapt quickly.

4

This is how I use HTML5 audio playback on Angular 5.

audio: any;

  ngOnInit() {
    this.audio = new Audio();
    this.audio.src = '../../assets/mp3/soundfile.ogg';
    this.audio.load();
  }

playAudio() { 
 this.audio.play();
   this.audio.loop = true;
}

  stopAudio() {
    this.audio.pause(); 
  }

  ngOnDestroy() {
    if(this.audio) {
      this.audio.pause();
      this.audio = null;
    }

No plugins needed. It will play an audio file.
You can optionally unload audio file when leaving a page.

This can work on Ionic using Ionic’s page life cycles.
FYI, ogg file works better than mp3 on browsers.

8 Likes
5

Awesome thanks for the sample code and the tips! I’m planning on dropping Ionic’s routing/lifecycle events and moving to Angular router with Ionic 4 once it moves to beta.

I’ll switch to html5 audio at the same time that I do the framework update and hopefully that will put me in a pretty solid position moving forward without too many breaking changes. Fingers crossed!

1 Like
6

I hope Ionic team will make a native wrapper for Superpowered SDK:

1 Like
7

This needs more a Cordova plugins that an wrapper.

1 Like
8

Yes, cordova & native wrapper would totally make it work.

This SDK package is perfect. It has the best features for any audio playback… and it’s not that difficult to configure. It works with simple commands like Play(), Stop(), etc.

So I imagine, it’s possible for Ionic team to create a plugin for this?
and it’s free. I think this one beats cordova audio plugins, html5 audio easily. Cordova audio plugin is a toy when compared to Superpowered SDK.

I personally wished Capaciitor will ship with Superpowered audio engine built-in…

9

I hadn’t heard of superpowered before but it looks like a cool project. It’s definitely not free and open source though, it has both proprietary code and a propreitary license that they can change at any point.

I think that the ionic team is wise to stick with free software with permissive licenses such as MIT, even if there are some compromises that need to be made to meet this criteria.

1 Like
10

It’s free until you get 500,000 installs:
Subject to all other terms below, if Licensee uses the SUPERPOWERED AUDIO SDK in an Embedded Application or Pre-Bundled or Pre-Installed or Platform Application, or has an application with over 500,000 installs, Licensee must secure a paid license from Superpowered Inc

At least for now… and I think that’s not bad.

11

Isn’t Ionic (or Cordova) some kind of embedded application?

1 Like
12

That’s right. Ionic team will be charged if they they publish Superpowered as a part of Capacitor… I didn’t understand their licensing fee policy. The only solution for us is anonymous guy making a cordova plugin for Superpowered.

A guy attempted this for React Native and was partially successful:

13

Free software is a matter of freedom to use how you want, not the price.

They wrote their own license and haven’t opened sourced large chunks of their code, so it’s not free.

14

No, it is free for the most users… if you become successful with their SDK, you can buy their paid license. I would love to do that. It’s like Firebase. Firebase gives you 10GB free every month so you can try until you become successful. If you don’t make anything from it, you’re not required to pay anything. Once you get high traffic, you can start pay per GB download.

They quoted 500,000 installs so I can imagine only the most successful apps will be required to buy paid license. Some great audio apps get 30,000 - 50,000 downloads.

The Superpowered Audio SDK offers free and paid licenses. Most apps qualify for a free license.

This is their free license description:

  • Distributed in a public application store system
  • The total number of installations is fewer than 500,000
15

Yes I understand that it costs $0 for most users, but like I said in my previous post and as explained in the Wikipedia article “Free software is a matter of liberty, not price”

Software can have a price of $0 and still not be free, since the licensing is restrictive and doesn’t provide freedom to the developer or end user

16

That sounds scary and threatening but I hope Superpowered are generous people.

17

Hello,
I’hv tried something like:
let audio = new Audio();
audio.src = “assets/myfile.wav”;
audio.play();

This is working perfectly in android. But not work in ios.
Please give me some ideas how can i play an audio in ios whrn any toast message is showing up.