- Overview
- Transcript
1.2 Use the Microphone With Ionic
In this lesson we’ll build a small Ionic app to demonstrate how to use the Cordova plugin to access device hardware. We’ll set up a basic Ionic project, install the plugins, and then write some simple UI and controller code to record and play back audio from the microphone.
Code Snippet
Here’s the code we use to access the microphone directly, without having to open a separate recording app.
//our player was previously declared as an HTTP element
var player = document.querySelector('audio');
function successCallback(stream) {
//on success, the audio player is directed to play the sound as it records
player.src = URL.createObjectURL(stream);
};
function errorCallback(error) {
//on failure, log the error
console.log('navigator.getUserMedia error: ', error);
};
$scope.getUserAudio = function() {
//because this API is still evolving, different browsers expose its with different names
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
//finally, request the audio stream
navigator.getUserMedia({audio:true, video:false}, successCallback, errorCallback);
};
Related Links
1.2 Use the Microphone With Ionic
[MUSIC] Hello everyone. This is Reggie Dawson. Welcome to the Use the Microphone with Ionic coffee break course for Tuts Plus. If you're not familiar with Ionic, it is a hybrid mobile app development platform. The distinction between hybrid and native platforms is that hybrid apps use the web view as the container for your app. Essentially your app is built on a Chrome based web browser. This creates a problem as this web view does not allow you to access your device's hardware by default. A lot of that is make use of the hardware provided on all devices, such as the camera, G.P.S. and microphone. Fortunately, I on it is able to access device hardware, since it is built on top of Cordova. Cordova's another hybrid platform that is the foundation of many hybrid frameworks, while I am it consists of the front end components that will make up the interface of your app Cordova provides the access to the device hardware. Cordova does this through the use of plugins. In this course we will use a couple of these plugins to access the microphone on our device. First we'll use the media capture plugin the devices default recording application. This works, but it will detract from the experience by dropping out of our app to record, after that we'll look at another method for using our microphone. But this time using the Get user media A.P.I. We will extract the stream and play it using a basic audio tag. Now this is a better solution as we can acquire the stream from the mike without leaving the app the downside to this method is that support will vary depending on what platform you build your app for the first thing we will do is install Ionic. This is easy enough provided you have no Js installed. Now understand we will not be able to build for platforms such as IOS and Android locally if we do not set up the respective STKs. Also we can only develop for IOS on a Mac. This is not much of a big deal as we can build with the cloud based service such as Ionic package or PhoneGap's build. I have already set up the required library to support building for the Android platform. After we have load installed all we have to do is go to a command prompt and use NPM. This will install Ionic and allow us to use the command line interface. This command line interface to allow you to do everything we need to do while building our app. There's also a desktop app called ionic lab that allows you to automate many of the command line tasks, but the command line interface is not that complicated to use. Next we'll create our app. This will create our folder name record at using the blank template. Once our project is created let's navigate through the WWW folder inside of our project folder. Then we're going to open up the app.js file inside of our js folder app.js is the file that will be executed when our app starts. First, we will create a variable to hold our angular module definition. We will also rename our app to recorder at, this is not necessary but I like to do this to avoid having to type the angular module definition over and over again. They will add record app in front of our run block. This is what runs when our app starts. And we typically use this to check that our platform is ready before initializing anything that needs ionic to be ready before starting. I could initialize my media capture here but it is not necessary. Another thing to note is that here is where we would configure our routing if this is a full single page app. The app we will build will only make use of one page, so we don't need to set up routing. After that, we need to add our plugin to capture from the microphone. Make sure to navigate inside of your project folder, and then we're going to run the ionic plugin add command. This will install the plugin and make it available in our app. This cordova plugin will launch the native recording application on our device. Since ionic is built on top of cordova, we are free to use all of the plugins available for cordova. Bear in mind that these plugins do not always work properly in emulation, so you'll need to run your app directly on your device to test sometimes. Next let's go to the index.html page. This is the page that will be the main interface of our app. First we will add the controllers.js script in our js folder, beneath our app.js script reference. We will create this file in a moment. Next we will change the name in ng-app to recorder app. We do this to match what we have in our angular module reference. Then we change the title in the ion header bar to Ionic Microphone Example. Then in ion content we add ng.controller. Here we are referencing the record controller. If we set our routing we could've specified the controller there. If we did this we would not need to reference a controller here. Then we will add an image I found of the mic I use. I copy the image to the IMG directory and applied a class to control the size of the image. The last thing we need to do in this file is add a button to launch our recording. Here we are using a standard ionic button with the ng-click attached Ng-click is how we create an event list, therefore a click event in Angular. The click will execute the startRecord function. Then we will go to the style.css file under the css folder. Here we will add the small class that we used on the image. We set the height to 200 pixels with the display set the black. I do this so that when we set the left and right margins to auto the image will be centered, after that we will create controllers.js in the js folder. The controller again is where we will place on logic that drives our app. First we will create our record controller. Here we are creating the record controller we reference in index.html. We have one dependency of scope which allows us to tie data from our controller into our view. Then we add our success function as the call back from our audio capture. We could do something interesting with the recording that is returned to our success function. But we don't need to do anything here since we're using the native default recording application of our device. Then we add our error callback which will log our error for us. Then the last thing we need to do is create our start record function to grab our recording. Here we are using scope which ties this function into our index.HTML page. Remember this is the function that is attached to the NG click. We're using the capture audio method which takes the success and error callbacks as arguments, after that our app is done. We can now preview and we have a few options. First we can do an ionic serve which will display our app in a web page Ionic is not limited to mobile as a build platform. So sometimes we can use Ionic serve to display our app. We can also use Ionic emulate to run the respective emulator for your platform. This requires setting up the STK for the platform at a minimum, also the emulator usually takes a long time to start. The final option is to plug in your phone to your computer and run ionic run. This will build the app and deploy it to your device. This again requires the correct S.T.K. for your platform. There's also the jenny motion emulator which we connect to the same as a physical device. For this example I will use the blue stacks player to run my app by browsing through the a P.K. and loading after that I will run the app. First I'm going to make sure my project folder and then I'm going to run ionic platform app Android. That will of course add the Android platform to our application after that, I run and build to create an A.P. K for our app. After that, you can browse to your project folder Platforms, Android, build, outputs, and A P.K. ,and then choose your Android debug A P K. If I click on the record button the recording app should launch, from here I can record audio clips and save them, but again this is taking us away from our app in the process. For a better way to access the microphone on our device, we'll use the et user media API which is part of Web RTC. I choose to use this API, as it illustrates another problem with using hybrid mobile app platforms. This is API is not fully supported on our browsers, and does not work properly on the browser that Ianic uses. The only way to make this work is to use an alternative web view called the cross walk in a later course. I will show you how to use cross walk in your projects but for now we will just look at this example in our browser. This is feasible as ionic is a platform to build apps of all kinds and not just mobile apps. The first thing we need to do is install the audio capture plugin Ionic plugin add cordova-plugin-chrome-apps-audiocapture. Once we have the plugin installed, we first need to go to the index.html page. Here we will add a button, as well as an audio control, so we can stop and start our mic stream at will. This example will just stream from the microphone and not record. Although we could provide this functionality with the Web audio API. Web audio also needs cross-walk so we won't worry about recording for now. Here we are adding another button with the ng click set to execute the get user audio function, then we will add an audio element. This element is set to display control so we can stop and start our stream, auto play will cause the stream to activate once we start our capture. After that we can go to our controllers dot GS file. Here we will add to our record controller. First we will create a variable to capture our audio element. We do this so we can assign our stream to our audio control, then we add our constraints object. When using the get use or media method we can pass it a constraint object that describes the type of data the connection will use. In this case we're just grabbing the audio. If we're using video we could pass further information such as the resolution of the video, then we add our success callback. Here the success callback is past the stream from the getUserMedia method. All we are doing here is assigning our stream to the audio player. We set the source of our player to the stream that was returned. One thing to bear in mind is that this API is changing and the new way of assigning the source of the player is not supported across all browsers yet. As a matter of fact the entire get user media API has changed to promise based methods versus the callbacks that we use here. The way we are using the API in this example is considered the legacy API. The reason we use it here is again the limited support of the new API without using a library to address the browser differences. Then we have our error callback that just logs the error. After that, we have to get user audio function. First, we had a shim that addresses the differences in prefixes depending on our browser. I had this so that the get user media method will work for whatever platform we build the app for, then we use the navigator get user media method with our constraints object success and error call backs. This method grabs the local user media and of course can also be used to obtain video from the user's camera as well. It is part of Web RTC, which is build into HTML five and allows you to make audio video calls or even share data between peers, after that our example is done. Save your project and make sure that your on the project folder. After that run Ionic Serve from the command line. After that our app will launch. As long as you have a mike attached if we could go on the microphone button, the players should start streaming our mike input. If we pause the player we can stop the stream, this is why we added the player. So we have a way to stop the stream once we started. Again these are simple examples to give you an idea of what you can do with Ionic. Sometimes you have to think outside of the box and find different ways to achieve what you're looking for. That's everything you need to know to access the microphone with Ionic. Hopefully you now have some ideas you can expand on in your own projects.
