Capturing Live Audio In HTML5 In WebView Android Apps 🎤

Introduction

Since its inception, HTML5 has been evolving and finding different ways to develop a standardized web experience across all browsers. The purpose of achieving this uniformity is to make process easier for web developers who use HTML5 to add different content on their respective websites. Currently, more often than not, the content ends up being optimized for one particular browser but may perform below its peak capability on other browsers. As a result, web developers need to put in long hours to refine their code so that the content fares well across most popular browser options such as Firefox, Chrome and Edge.

Among the different content available on a website, audio ranks as one of the most important components. Websites such as SoundCloud are heavily dependent on the proper functioning of audio. However, audio is not just limited to playback.  In some cases, we need to capture and record audio in a website as well. It could be for the purpose of recording music and then uploading it on the website so that it can be shared with other users. That is why the importance of audio recording cannot be understated. In order to capture and record audio, there are different approaches one can take. We would briefly look at them and identify some of their limitations.

Coding based approach

Manually writing the code to achieve audio recording in a web page is the commonly used approach. It involves the use of APIs which can return media streams including both audio and video. It can be a challenging proposition that requires effort and experimentation in order to achieve the desired functionality. This is because every audio recording code may not work with the desired web browser. As a result, one may be compelled to look for a more standardized solution (like WebViewGold) that can handle all scenarios with proficiency.

The code below can be used to capture audio using a microphone in HTML5.  The media stream returned from this code contains both the video and audio stream. This approach works with selected versions of Chrome, Firefox and Opera but offers no support for Safari and Internet Explorer.

var p = navigator.mediaDevices.getUserMedia({ audio: true, video: true });

p.then(function(mediaStream) {

  var video = document.querySelector(‘video’);

  video.src = window.URL.createObjectURL(mediaStream);

  video.onloadedmetadata = function(e) {

// Do something with the video here.

    video.play();

  };

});

p.catch(function(err) { console.log(err.name); });

For a more extensive approach, one can use the getUserMedia API which works with most browsers and is capable of capturing media streams from both webcams and microphones. Once the media stream has been captured, createMediaStreamSource is used to form a MediaStreamAudioSourceNode.

After the completion of the above steps, we make use of AudioNodes which contains both sources and destinations of the audio along with the necessary modules needed to process the audio. Therefore, once connected to AudioNodes, we can make use of ScriptProcessorNode for processing the audio while the audio buffer can be extracted using onaudioprocess event.

if (navigator.getUserMedia) {

   console.log(‘getUserMedia supported.’);

   navigator.getUserMedia (

      // constraints: audio and video for this app

      {

         audio: true,

         video: true

      },

      // Success callback

      function(stream) {

         video.src = (window.URL && window.URL.createObjectURL(stream)) || stream;

         video.onloadedmetadata = function(e) {

            video.play();

            video.muted = ‘true’;

         };

         // Create a MediaStreamAudioSourceNode

         // Feed the HTMLMediaElement into it

         var source = audioCtx.createMediaStreamSource(stream);

      },

      // Error callback

      function(err) {

         console.log(‘The following gUM error occured: ‘ + err);

      }

   );

} else {

   console.log(‘getUserMedia not supported on your browser!’);

}

var scriptNode = audioCtx.createScriptProcessor(4096, 1, 1);

scriptNode.onaudioprocess = function(audioProcessingEvent) {

  // The input buffer is the song we loaded earlier

  var inputBuffer = audioProcessingEvent.inputBuffer;

  // Loop through the output channels (in this case there is only one)

  for (var channel = 0; channel < outputBuffer.numberOfChannels; channel++) {

    var inputData = inputBuffer.getChannelData(channel);

  }

}

source.connect(scriptNode);

scriptNode.connect(audioCtx.destination);

Finally, in order to upload the extracted audio buffer to a remote server, one can use different options. These include WebSockets and XMLHttpRequest.

WebViewGold

As we have seen above, coding can be complicated but with WebViewGold the above process can be achieved in a manner that is compatible with all web apps/websites and does not require any coding knowledge. WebViewGold is a versatile tool that can be used to convert your webpage or web app into an iOS or Android app. Among its many features, WebViewGold can be used to capture and record live audio in HTML. While the audio recording is certainly an attractive component of this tool, it is capable of so much more.

The primary use of WebViewGold is for businesses that already have an online presence in the form of a website but wish to expand further by entering the app segment as well. In the age of smartphones, users spend more time using mobile apps compared to browsing internet conventionally. That is why it makes sense to expand to mobile apps as it would bring more potential customers to your respective service. Creating a mobile app from scratch can be a time-consuming task but, with WebViewGold, you can create a mobile app for either Android and/or iOS with ease and that too in a short period of time by converting your existing website into the app itself.

Audio Recording is an integrated feature of WebViewGold. This means that it is available by default with no need for any additional steps. Within the Config.java file of the WebViewGold, one can find different configuration options. If one plans to use them, their value needs to be set as true. For audio recording, the option is requireRecordAudio which needs to be set as true in order to get the necessary APIs required for audio recording and capturing.

By making use of WebViewGold, the process of audio recording and capturing becomes hassle-free. One no longer needs to worry about complex codes or browser compatibility issues. This reduces the workload and allows you to focus on other important tasks that need your attention.