Extended HTML Audio Object
This project is supposed to keep standard html audio object and add missing features to it with the help of Web Audio API.
AudioContext is not supported in some old browsers such as Microsoft Internet Explorer. Please try this object with the latest modern browsers like Chrome, Firefox and Safari.
- 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 the basic 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 is 0.
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 the equalizer example.
Both fadein and fadeout are separated methods on the eAudio 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 is 3 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 secondseAudio supports two kind of analysers (Frequency Analyse and Domain Analyse). The output of the analyser is an array of numeric values between 0 and 256. Analyser is customizable by two properties. specLines sets the number of output lines and specSmooth adjusts the smoothnes of the output lines. The analyser's output array is catchable during the time from two properties specFreq and specDomain.
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 are 16,32,64,128,256,512 and 1024. The defaul value is 256.
constcurrentLines=audio.specLines;// Gets the current lines countaudio.specLines=256;// Sets the output length to 256Sets or gets the smoothness of the analyser output. The value must between 0 and 1. The default value is 0.75.
constsmoothness=audio.specSmooth;// Gets the current smoothnessaudio.specSmooth=0.75;// Sets the smoothness to 0.75Returns the frequency analysis array for the current moment. Each item in the array is an integer between 0 and 256.
constcurrentAnalysis=audio.specFreq;// Gets an array of integers for current momentFor more information and usage see the spectrum example.
Returns the domain analysis array for the current moment. Each item in the array is an integer between 0 and 256.
constcurrentAnalysis=audio.specDomain;// Gets an array of integers for current momentFor more information and usage see the domain 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 to hh: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 current source, equalizer and volume 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