News

Use the AudioFX plugin to create distinctive sounds

WILD, the agency behind the JOHO site explains the basics behind the FX plugin for Web Audio API

AudioFX

WILD, the agency behind the JOHO site explains the basics behind the FX plugin for Web Audio API

AudioFX

GET THE CODE

Download plugin

Begin by visiting the AudioFX GitHub repository at github.com/madebywild/audioFX and click the Download ZIP button on the right to obtain the latest version. Unzip the audioFX-master.zip file and explore the folder. The file you need is found in the dist subfolder so navigate to it and copy AudioFX.min.js into the root of your new HTML page. You can also find test.mp3 within the ‘examples’ folder.

Link the files

To start using the plugin, begin a new HTML page and attach our plugin files by adding the <script> reference for the AudioFX.min.js file. Alternatively, you could choose to use the CDN version hosted online by using the second reference shown below. These must go before subsequent code, either in your page <head> or before your closing </body> tag

001 <head>
002 <script src=”AudioFX.min.js”></    script>
003 <!-- OR ALTERNATIVELY VIA THE CDN     -->
004 <script src=”http://cdn.jsdelivr.net/audiofx/latest/AudioFX.min.js”></    script>
005 </head>

Add the function

Underneath these lines, just before your closing </head> tag, we’ll create a new AudioFX instance. Here we first pass whichever MP3 file we wish to play, which in this instance is named as test.mp3, and would also be within the root of the page. By calling the second callback function (optional) and the play(); method, the file will begin playback upon load and only for the duration of the audio. Within this you may also pass an offset start value, by default ‘0’ for the beginning.

001 <script>
002 var TestAudio = new AudioFX(“test.    mp3”, function(){
003  this.play(0);});
004 </script>

Play with the settings

Additionally, you can apply various options on instance level including volume (a float between 0 and 1) and a loop toggle (boolean, default false). If you include ‘autoplay: true’ here as well, the audio will start without requiring the this.play() method in the previous step. What we like most, however, is our lowpass filter effect which you can also change using a value between 0 and 1 with the filterFrequency option:

001 var TestAudio = new AudioFX(“test.mp3”, function(){
002     //do something in here
003 }, {
004 loop: true, //boolean defaults to false
005 volume: 0.85, //float value between 0 and 1
006 filterFrequency: 0.5, //float value between 0 and 1
007        autoplay: true //boolean defaults to false
008 });
009 </script>

Play with methods

A series of methods beyond merely .play() can be called to stop, pause, toggle, change the volume and more. The changeFilter() method accepts frequency and quality numbers (between 0 and 1) to alter the effect of the lowpass filter more acutely. Full documentation for these methods can be found at github.com/madebywild/audioFX, but here we’ll focus on the filter:

001 var TestAudio = new AudioFX(“test.mp3”, function(){
002  this.changeFilter(0.5, 0.5);    
003 }, {
004 loop: true, //boolean defaults to false
005 volume: 0.85, //float value between 0 and 1
006 autoplay: true //boolean defaults to false
007 });
008 </script>

Final preview

Save and preview the page in your browser. The sound should now be playing in a loop and have our lowpass filter applied to it. If you wish to use WAV or OGG files, these will work just as well. An online demo of the plugin can be viewed via madebywild.github.io/audioFX with a version supplied on FileSilo.

×