Ionic 4/Angular and Cordova Audio Recording & Playing

Ionic 4/Angular and Cordova Audio Recording & Playing

In this Ionic 4/Angular tutorial, we are going to teach you step by step how to create a hybrid mobile app for Android (And iOS and Windows Phone if you want too) using the latest version of the Ionic framework.

The cross platform application we are going to build an application that can be used as an audio player and recorder so it needs to access the device microphone and speaker which can be easily achieved using a Cordova plugin - MediaPlugin{target:_blank} that allows to play and capture/record audio using native features of your device.

The tutorial assumes you have already installed and configured your environment. Basically you need to have:

  • The Latest versions of Node.js and NPM innstalled (so you can install Ionic CLI 4).
  • Ionic framework installed.
  • Java and Android SDK installed to be able to build your app APK.
  • Xcode and a MAC system for iOS .

Now open up your terminal under Linux/MAC or command prompt/power shell under Windows and enter the following instructions to scaffold a new Ionic 4 project based on Angular:

ionic start ionic4-audio-recorder-player blank --type=angular

Next, we need to install Cordova. So go ahead and type:

npm install -g cordova 

Next navigate into your project root folder and add your target platform:

cd ionic4-audio-recorder-player   
cordova platform add android 

Next install the ionic-native package from npm using the following command:

npm install ionic-native --save
Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status