How To Use The web AU­DIO api

Dis­cover how to use a pow­er­ful mod­u­lar ap­proach to build­ing sound

Web Designer - - Awesome Audio -

While the au­dio el­e­ment al­lows you to in­clude plugin-free au­dio on your site, it is still lim­ited. For max­i­mum sound con­trol, the Web Au­dio API al­lows you to gen­er­ate sounds, play ex­ist ones, cre­ate ef­fects and much more. In this ex­am­ple you’ll load and play a sound file us­ing the API.

1. ini­tialise the Au­dio con­text

To start we need to set up our Au­dio Con­text, an au­dio can­vas for our sounds. This method en­sures max­i­mum cross-browser sup­port and fall­back in case the API is not sup­ported. try { win­­dioctx = win­dow. Au­dio­con­text|| win­dow. we­bki­tau­dio­con­text; au­dioctx = new Au­dio­con­text(); } catch(e) { alert(‘web Au­dio API is not sup­ported in this browser’); } A sin­gle au­dio con­text sup­ports mul­ti­ple sound in­puts and com­plex au­dio graphs, so you only need one for each au­dio ap­pli­ca­tion we cre­ate.

2. con­nect the Au­dio graph

Any au­dio node’s out­put can be con­nected to any other au­dio node’s in­put by us­ing the con­nect() func­tion. In this ex­am­ple you will con­nect a source node’s out­put into a gain node, and con­nect the gain node’s out­put into the con­text’s des­ti­na­tion: // Cre­ate the source. var source = con­text. cre­ate­buffer­source(); // Cre­ate the gain node. var gain = con­text.cre­ate­gain(); // Con­nect source to fil­ter, fil­ter to des­ti­na­tion. source.con­nect(gain); gain.con­nect(con­text. des­ti­na­tion); This au­dio graph is now dy­namic, mean­ing you can change it when­ever you need. You can disconnect au­dio nodes from the graph by call­ing node. disconnect(out­put­num­ber). The power of this mod­u­lar ap­proach al­lows you to con­trol gain (vol­ume) for all sounds, or ones you wish. You can route sounds through ef­fects or not at all, or in any com­bi­na­tion you might need.

3. Load­ing Sounds

To load an au­dio file into the Web Au­dio API, we can use an Xml­httpre­quest and process the re­sults with con­text. de­codeau­dio­data. This works asyn­chronously and doesn’t block the main in­ter­face thread. Here is what the code would look like: var re­quest = new Xml­httpre­quest(); re­‘get’, url, true); re­­spon­se­type = ‘ar­ray­buffer’; re­quest.on­load = func­tion() { con­­codeau­dio­data(re­quest. re­sponse, func­tion(the­buffer) { buf­fer = the­buffer; }, on­error); } re­quest.send();

4. Play­ing Sounds

Au­dio buf­fers are only one po­ten­tial source of au­dio. You can use di­rect in­put from a mi­cro­phone or line-in de­vice or an <au­dio> tag among oth­ers. Once you’ve loaded your buf­fer, you need to cre­ate an Au­diobuffer­sourcenode for it, con­nect the source node into your au­dio graph, and then call start(0) on the source node. To stop a sound, call stop(0) on the source node. The code looks like this: func­tion playsound(buf­fer) { var source = con­text. cre­ate­buffer­source(); source.buf­fer = buf­fer; source.con­nect(con­text. des­ti­na­tion); source.start(0); }

5. Putting it ALL to­gether

As you can see from the pre­vi­ous code, there’s a bit of setup to get sounds play­ing in the Web Au­dio API. But, with this mod­u­lar ap­proach you gain max­i­mum con­trol over au­dio. Mix­ing sounds, read­ing their data via the An­a­lyzer Node and so much more. Here is what a work­ing ex­am­ple to load and play a sound looks like all to­gether. Con­sider ab­stract­ing these steps for man­ag­ing mul­ti­ple sounds in larger projects as well. var au­dioctx, anal­yser, buffer­length, dataar­ray; win­­de­ventlis­tener(‘load’, ini­tau­dio, false); func­tion ini­tau­dio() { try { win­­dioctx = win­dow. Au­dio­con­text|| win­dow. we­bki­tau­dio­con­text; au­dioctx = new Au­dio­con­text(); anal­yser = au­dioctx. cre­ate­anal­yser(); } catch(e) { alert(‘web Au­dio API is not sup­ported in this browser’); } // load the au­dio file source = au­dioctx. cre­ate­buffer­source(); var re­quest = new Xml­httpre­quest(); re­‘get’, ‘as­sets/ beat3.mp3’, true); re­­spon­se­type = ‘ar­ray­buffer’; re­quest.on­load = func­tion() { var au­dio­data = re­quest. re­sponse; au­dioctx. de­codeau­dio­data(au­dio­data, func­tion(buf­fer) { source.buf­fer = buf­fer; source.con­nect(anal­yser); anal­yser.con­nect(au­dioctx. des­ti­na­tion); source.loop = true; source.start(0); },func­tion(e){“er­ror with de­cod­ing au­dio data” + e.err}); } re­quest.send(); }

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.