Adding Sounds using HTML5 and Native Audio in Ionic

‘member Flash?
Adding Sounds using HTML5 and Native Audio in Ionic flash crashThis is what we are going to use because it’s the best technology in the world… just kidding.
Back in the days Flash was very helpful, we were able to make animations, audio players and so much more!

Then came HTML5 and people started wondering why they could watch their videos without crashesūü§Ē.

Thanks to the HTML5 audio tag it’s possible to create an audio player for a web application with four lines of code.
As you already know, Ionic allows us to use HTML5 to build mobile applications, so we can use the HTML5 features!

HTML5 audio

First let’s setup the audio files.

My tracks will be located in the src/assets/audio directory:

It all started with the audio tag folder

Note that it’s also possible to use a remote url instead of a local file (in this case the file might take longer to load, you should add the preload attribute to the audio tag we will use a bit further).

Starting from scratch:

Anticipating here and adding Cordova for the second part of this tutorial.

Let’s update the home.html file:

This is the simplest way to create an audio player: the HTML5 <audio> Element.

The audio tag is a standard, it possesses a lot of features you can harness (documentation here).
In this example the controls attribute adds more HTML Elements to allow the user to play, pause, move forward, etc.

If we just want the sound like a background music for example, it’s possible to remove the controls attribute, add a reference to the <audio> tag:

And move to the home.ts file to finalize the work:

Starting by using ViewChild to grab the Audio Element from the DOM.

A bit further:

To be sure that everything is loaded, the code will be located in the ngAfterViewInit hook.
We are looking for the oncanplaythrough callback. This callback is triggered when the audio can be played all the way through, which is very useful if the user has a bad internet connection and the audio is loading very slooooooowwww.

Once the audio is ready, the play method is used and the background music is rolling!

However, it’s not great to have a useless HTML5 element in the DOM.

If the music is all you care about, it’s possible to use the standard Audio Class:

HTML5 is awesome. However, Cordova added a Native Audio Plugin.

Why?

Here are some reasons:

  • Older versions of mobile platforms aren’t always HTML5-friendly
  • More functionalities were required (mono, stereo, etc.)
  • Using Native features improves the performances which fixes some Android devices’ latency issues with HTML5 Audio

Let’s implement this solution with Ionic.

Subscribe to my mailing list to get access to a Free 7-day Ionic 3 introduction email course!
100% Privacy. I'll never spam you!

Ionic Native Audio

Starting with the installations:

The Ionic Native Audio plugin is imported in the app.module.ts file:

Let’s take a step back to analyze what we can do.

Ionic Native Audio offers two types of preloading: simple and complex.
The simple method is … simple. It should be used for short duration sounds (five seconds) like beeps, bangs sounds.

The complex one offers much more:

  • Possibility to loop, pause, change the volume
  • Adding some delay to create some cool fade in effects
  • Handling multiple channels

The last one is more suited to our case: a background music.

We can now preload our track in the home.ts file:

The preloadComplex method will create a complex track that will have a unique identifier named ‘track1‘, once the operation is done, the¬†onSuccessPreloading method will be used:

Using the play method and the identifier ‘track1’, the sounds from track1.mp3 are rolling.
This play method can also accept a callback to use once the track is done playing, more information in the official documentation.

The audio file will stay in memory, so we need to clean up otherwise it will create a memory leak:

The ngOnDestroy hook will clean up by summoning the unload method with the corresponding identifier.

Conclusion

Adding some sounds in an Ionic application is quite easy and it should be!
The only task you should worry about is unloading the tracks at the right place and the right moment, here it’s done in the ngOnDestroy method, however, depending of your application it could be done somewhere else.
If you are confident that your users will have top-notch devices, you can go with HTML5 Audio.
If not, you can use the Ionic Native Audio plugin because it’s built on Cordova which uses the Native Components of the device. Cordova is a solid technology, the audio feature has been tested for years so it’s a robust choice.

No Comments Yet

Leave a Reply

Your email address will not be published. Required fields are marked *

5 Shares