{"id":936,"date":"2014-06-11T16:48:20","date_gmt":"2014-06-11T20:48:20","guid":{"rendered":"http:\/\/blog.agilityfeat.com\/?p=936"},"modified":"2020-11-10T20:40:12","modified_gmt":"2020-11-10T20:40:12","slug":"web-audio-api-part-1","status":"publish","type":"post","link":"https:\/\/agilityfeatpanama.com\/en\/blog\/2014\/06\/web-audio-api-part-1\/","title":{"rendered":"Recording in Real Time with the Web Audio API (Part 1)"},"content":{"rendered":"<p>Building software to manipulate files is always tricky, however when we are talking about audio files and specifically about the Web Audio API in HTML5, this challenge gets significantly more difficult. In this post, we will look at the basics you need to know to get started recording and manipulating audio in the browser with the Web Audio API.<\/p>\n<h2>Browser Compatibility<\/h2>\n<p>There are many things to take into consideration, starting with audio file and browser compatibility. Although browsers are getting more standardized, there are still syntax nuances for particular calls that you need to be aware of when using the Web Audio API. <span style=\"color: #000000;\">For example, here is the way to execute the call for GetUserMedia in Chrome, Android, Firefox and Internet Explorer (notice the difference in prefixes);<br \/>\n<\/span><\/p>\n<p><script src=\"https:\/\/gist.github.com\/asime\/de9a924db9cb47f64d24.js\"><\/script><\/p>\n<p>Also, there are differences between browser type in terms of the files types that each browser can play.<\/p>\n<p><a href=\"\/wp-content\/uploads\/2014\/06\/Screen-Shot-2014-06-14-at-4.28.49-PM.png\"><img loading=\"lazy\" src=\"\/wp-content\/uploads\/2014\/06\/Screen-Shot-2014-06-14-at-4.28.49-PM-1024x308.png\" alt=\"http:\/\/www.w3schools.com\/tags\/tag_audio.asp\" width=\"689\" height=\"207\" style=\"max-width: 689px; max-height: 207px;\" class=\"alignleft size-large wp-image-941\" \/><\/a><br \/>\n<br clear=\"left\"\/><br \/>\n<strong><a target=\"_blank\" href=\"http:\/\/www.w3schools.com\/tags\/tag_audio.asp\" rel=\"noopener noreferrer\">Table Source: W3Schools.com<\/a><\/strong><\/p>\n<p>You will want to specify a base case or cases for the file types you want to enable. For our example we took a \u00abdemocracy\u00bb approach which means using the audio format that is compatible with most browsers. We decided to use Wav files.<\/p>\n<p>The first thing we do is check file type and if it is not supported, run a process to convert it to Wav. In order to determine whether or not a particular file type will\u00a0 play, you can use the canPlayType method of audio and\/or video objects:<\/p>\n<p>Here&#8217;s the sample code:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/asime\/a5a23ff7dbb51c9c5a66.js\"><\/script><\/p>\n<p>And here is a list of common values for the canPlayType method:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/asime\/84d281f95a4a34625468.js\"><\/script><\/p>\n<p>Lastly, The possible return values from that call are:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/asime\/22484c559b18e9ff40d1.js\"><\/script><\/p>\n<p>So, when canPlayType returns an empty string, we convert the file.<\/p>\n<h2>Understanding the HTML5 Web Audio API<\/h2>\n<p>Before the HTML5 Web Audio API, we used the audio tag to interact with audio files, calling play, pause or stop.\u00a0 Now the Web Audio API opens a whole new set of opportunities via audio context. An audio context controls the creation of the nodes it contains and the execution of the audio processing, or decoding. <\/p>\n<p>Put more simply, the audio context let&#8217;s you manage sounds. In our example, we will create a single audio context for our application (more on that later).<\/p>\n<p>A super important part of the HTML5 Web Audio API are the <strong><a href=\"http:\/\/www.w3.org\/TR\/webaudio\/#AudioNode-section\" target=\"_blank\" rel=\"noopener noreferrer\">AudioNodes<\/a><\/strong>. AudioNodes are the basic units of AudioContext. The AudioNodes represent audio sources, the audio destination, and intermediate processing modules. We&#8217;ll talk more about AudioNodes in our next post.<\/p>\n<p>Here is a list of the AudioNodes we used:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/asime\/4714ecf318a849059947.js\"><\/script><\/p>\n<p>It&#8217;s worth noting that some browsers limit the quantity of AudioContext instances you can create so we are only creating a single AudioContext instance for our application.<\/p>\n<p>When we are working with audio files we do not use the actual Wav file, we load the audiofile but get an arraybuffer.  From there we can start manipulating the file. <\/p>\n<p>Here&#8217;s how it works &#8230; We use the XMLHTTPRequest object to make a call to the file url we want to load, and that will give us access to the arraybuffer of that file:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/asime\/b03eede14d4f98262562.js\"><\/script><\/p>\n<p>As you can see in the snippet of code we are setting the responseType to &#8216;arraybuffer&#8217;. Other possible values of the responseType attribute are \u00abblob\u00bb, \u00abdocument\u00bb, \u00abjson\u00bb, and \u00abtext\u00bb. See <strong><a href=\"http:\/\/www.w3.org\/TR\/XMLHttpRequest\/#the-responsetype-attribute\" target=\"_blank\" rel=\"noopener noreferrer\">here for more information<\/a><\/strong> on response types for the calls.<\/p>\n<p>Audio quality is important and with the arraybuffer we can create a new audio file to be played that we can manipulate. We can set the quality of the audio by specifying the sample rate. <\/p>\n<p>Sample rate is the number of samples of audio carried per second, measured in Hz or kHz (one kHz being 1 000 Hz). For example, 44 100 samples per second can be expressed as either 44 100 Hz, or 44.1 kHz. So, if you need to increase the quality of a sound, you can increase the sample rate.<\/p>\n<p>However, it is also important to keep bandwidth in mind. If you are going to be uploading and downloading the files you might want to record at a lower sample rate like 20kHz (and use that as a source) to reduce the file size and CPU use.<\/p>\n<p>In the example above, we use the arraybuffer coming from the XMLHTTPRequest (V2).<\/p>\n<p>Once we have the arraybuffer, we create a <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Blob\" target=\"_blank\" rel=\"noopener noreferrer\">blob<\/a><\/strong>. To create a new blob, the constructor needs a new instance of dataView and that&#8217;s created from the array buffer.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/asime\/731f46ffb4fec5d1e26e.js\"><\/script><\/p>\n<p>It is important to know that we use an instance of OfflineAudioContext object which is similar to the audioContext object. The difference is that the OfflineAudioContext will generate the audio content faster in a buffer.<\/p>\n<p>At this point, you have laid the groundwork for recording and manipulating sound via the Web Audio API. In our next post in the series, we&#8217;ll dig into the final steps to take to complete the project.<\/p>","protected":false},"excerpt":{"rendered":"<p>Building software to manipulate files is always tricky, however when we are talking about audio files and specifically about the Web Audio API in HTML5, this challenge gets significantly more difficult. In this post, we will look at the basics you need to know to get started recording and manipulating audio in the browser with [&hellip;]<\/p>","protected":false},"author":12,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":""},"categories":[128,57],"tags":[108,114,23],"jetpack_featured_media_url":"","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Recording in Real Time with the Web Audio API (Part 1) - AgilityFeat Panama Software Test Center<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/agilityfeatpanama.com\/en\/blog\/2014\/06\/web-audio-api-part-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Recording in Real Time with the Web Audio API (Part 1) - AgilityFeat Panama Software Test Center\" \/>\n<meta property=\"og:description\" content=\"Building software to manipulate files is always tricky, however when we are talking about audio files and specifically about the Web Audio API in HTML5, this challenge gets significantly more difficult. In this post, we will look at the basics you need to know to get started recording and manipulating audio in the browser with [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/agilityfeatpanama.com\/en\/blog\/2014\/06\/web-audio-api-part-1\/\" \/>\n<meta property=\"og:site_name\" content=\"AgilityFeat Panama Software Test Center\" \/>\n<meta property=\"article:published_time\" content=\"2014-06-11T20:48:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-11-10T20:40:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/agilityfeatpanama.com\/wp-content\/uploads\/2014\/06\/Screen-Shot-2014-06-14-at-4.28.49-PM-1024x308.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/34.200.113.64\/#website\",\"url\":\"https:\/\/34.200.113.64\/\",\"name\":\"AgilityFeat Panama Software Test Center\",\"description\":\"AgilityFeat Panama offers customized, multilevel web and mobile software testing for a variety of industries.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/34.200.113.64\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/agilityfeatpanama.com\/blog\/2014\/06\/web-audio-api-part-1\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"\/wp-content\/uploads\/2014\/06\/Screen-Shot-2014-06-14-at-4.28.49-PM-1024x308.png\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/agilityfeatpanama.com\/blog\/2014\/06\/web-audio-api-part-1\/#webpage\",\"url\":\"https:\/\/agilityfeatpanama.com\/blog\/2014\/06\/web-audio-api-part-1\/\",\"name\":\"Recording in Real Time with the Web Audio API (Part 1) - AgilityFeat Panama Software Test Center\",\"isPartOf\":{\"@id\":\"https:\/\/34.200.113.64\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/agilityfeatpanama.com\/blog\/2014\/06\/web-audio-api-part-1\/#primaryimage\"},\"datePublished\":\"2014-06-11T20:48:20+00:00\",\"dateModified\":\"2020-11-10T20:40:12+00:00\",\"author\":{\"@id\":\"https:\/\/34.200.113.64\/#\/schema\/person\/b2086c365e0b4fb0fbaa4042fab5617e\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/agilityfeatpanama.com\/blog\/2014\/06\/web-audio-api-part-1\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/34.200.113.64\/#\/schema\/person\/b2086c365e0b4fb0fbaa4042fab5617e\",\"name\":\"Allan\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/34.200.113.64\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"Allan\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/posts\/936"}],"collection":[{"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/comments?post=936"}],"version-history":[{"count":1,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/posts\/936\/revisions"}],"predecessor-version":[{"id":1350,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/posts\/936\/revisions\/1350"}],"wp:attachment":[{"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/media?parent=936"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/categories?post=936"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/agilityfeatpanama.com\/en\/wp-json\/wp\/v2\/tags?post=936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}