Repository files navigation

Extended HTML Audio Object

This project is supposed to keep standard html audio object and add missing features to it with the help ofWeb Audio API.AudioContext is not supported in some old browsers such asMicrosoft Internet Explorer. Please try this object with the latest modern browsers likeChrome,Firefox andSafari.

• 10 Band Equalizer
• FadeIn / FadeOut
• Audio Analyser
• PlayToggle
• Formatted Time
• Preset

eAudio setup and functionality is the same as standard html audio object:

<divid="container"></div><scriptsrc="js/eAudio.js"></script><script>constaudio=neweAudio('your_audio_file.mp3');audio.controls=true;document.querySelector('container').appendChild(audio);</script>

For more details review thebasic example.

eAudio comes with 10 band equalizer. The frequency bands are adjusted on standard harmonic octaves (31Hz,63Hz,125Hz,250Hz,500Hz,1kHz,2kHz,4kHz,8kHz,16kHz). The gain for each band is limited between+6db and-24db to prevent output distortion and band converage. The default gain value for each band is0.

audio.q31=0;audio.q63=0;audio.q125=0;audio.q250=0;audio.q500=0;audio.q1000=0;audio.q2000=0;audio.q4000=0;audio.q8000=0;audio.q16000=0;

For more details review theequalizer example.

Both fadein and fadeout are separated methods on theeAudio object. The fading time can be passed as an argument to the fader methods. If no argument is passed they will use their default value which is3 seconds. Please be informed that faders do not have callbacks and will not affect play and pause methods on audio object.

audio.fadein();// 3 seconds by defaultaudio.fadein(10);// 10 secondsaudio.fadeout();// 3 seconds by defaultaudio.fadeout(10);// 10 seconds

eAudio supports two kind of analysers (Frequency Analyse andDomain Analyse). The output of the analyser is an array of numeric values between0 and256. Analyser is customizable by two properties.specLines sets the number of output lines andspecSmooth adjusts the smoothnes of the output lines. The analyser's output array is catchable during the time from two propertiesspecFreq andspecDomain.

Adjusts the resolution of analyser or in other words sets the output array length. You can set or get the length of the output array. Acceptable values are16,32,64,128,256,512 and1024. The defaul value is256.

constcurrentLines=audio.specLines;// Gets the current lines countaudio.specLines=256;// Sets the output length to 256

Sets or gets the smoothness of the analyser output. The value must between0 and1. The default value is0.75.

constsmoothness=audio.specSmooth;// Gets the current smoothnessaudio.specSmooth=0.75;// Sets the smoothness to 0.75

Returns the frequency analysis array for the current moment. Each item in the array is an integer between0 and256.

constcurrentAnalysis=audio.specFreq;// Gets an array of integers for current moment

For more information and usage see thespectrum example.

Returns the domain analysis array for the current moment. Each item in the array is an integer between0 and256.

constcurrentAnalysis=audio.specDomain;// Gets an array of integers for current moment

For more information and usage see thedomain example.

You can play/pause audio more easily by playToggle property:

audio.playToggle=true;// Plays the audioaudio.playToggle=false;// Pauses the audio// Toggle playback by clicking a buttondocument.querySelector('button').addEventListener('click',e=>{audio.playToggle=!audio.playToggle;// Toggles play/pause});

This property stringifies the current audio time tohh:mm:ss format.

<divid="timer">00:00:00</div><script>consttimer=document.querySelector('#timer');setInterval(()=>{timer.innerText=audio.formattedTime;},1000);</script>

This property can set or get the currentsource,equalizer andvolume settings as an json string. It is useful to save your current settings to database or file and simply set all the settings very fast.

constcurrentSettings=audio.preset;// Get the json settings stringaudio.preset=currentSettings;// Set the settings back