![]() Cordova is a solid technology, the audio feature has been tested for years so it’s a robust choice. If not, you can use the Ionic Native Audio plugin because it’s built on Cordova which uses the Native Components of the device. If you are confident that your users will have top-notch devices, you can go with HTML5 Audio. The controls attribute adds audio controls, like play, pause, and volume. 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. ConclusionĪdding some sounds in an Ionic application is quite easy and it should be! The ngOnDestroy hook will clean up by summoning the unload method with the corresponding identifier. 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 tag: Īnd move to the home.ts file to finalize the work: import In this example the controls attribute adds more HTML Elements to allow the user to play, pause, move forward, etc. The audio tag is a standard, it possesses a lot of features you can harness (documentation here). This is the simplest way to create an audio player: the HTML5 Element. Your browser does not support the audio element. Starting from scratch: npm install -g ionic cordova start myApp blankĪnticipating here and adding Cordova for the second part of this tutorial. 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). My tracks will be located in the src/assets/audio directory: ![]() As you already know, Ionic allows us to use HTML5 to build mobile applications, so we can use the HTML5 features! HTML5 audio Thanks to the HTML5 audio tag it's possible to create an audio player for a web application with four lines of code. Then came HTML5 and people started wondering why they could watch their videos without crashes□. just kidding.īack in the days Flash was very helpful, we were able to make animations, audio players and so much more! This is what we are going to use because it's the best technology in the world. ![]() Adding Sounds using HTML5 and Native Audio in Ionic
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |