audioly v1.0.1
audioly
Library for audio controls, visualization, waveform and trimming/cutting
API (Usage)
Instantiate the audioly class
const audioly = new Audioly(audio);
Sliders
- Fill slider
audioly.fillSlider(el, {
options: {},
});
- el: html element to be used as a slider (required)
- options:
- thumb: boolean (optional)
- thumbColor: string containing rgb or hex color (optional)
- thumbWidth: string containing value in pixels. Should be "1", "2" etc, without px after the value(optional)
- sliderRGBColor: Object with rgb color of the slider. Example, (optional)
{
r: "0",
g: "0",
b: "0",
}
- Cut slider
audioly.cutSlider(el, {
options: {},
});
Same application as the fill slider with one additional option:
- aud: an object with two keys {start, end}. The start key specifies the time in seconds where the audio should start playing, and the end key specifies the end of the audio play.
Times
- getCurrentTime This will get the audio's current time in the format (mins:secs)
- getDuration This will get the audio's full duration in the format (mins:secs)
- currentPosition This will get the current audio position in seconds while you change the audio position
Waveform
drawWaveform(
canvas,
opt = {}
)
- canvas: The canvas html element (required)
- opt: options for the customization of the wave form. This has two properties, (optional)
- color: The color of the waveform
- background: The background color of the the canvas
Icons
audIcons(name)
This works hand in hand with fontawesome icons to get the icons for the audio controls. The name property can be any of the following:
- play: When the audio is paused
- pause: When the audio is playing
- mute: When the audio is not muted
- zero volume: When the audio's volume is 0
- unmute: When the audio is muted
- loop: When the audio is not looped
- back: The back button icon
- next: The next button icon
Playing and pausing audio
playPause(
el,
options = {
playStr: "play",
pauseStr: "pause",
},
styles = { on: null, off: null }
)
- el: html element that acts as the playing and pausing button (required)
- options: an object with two keys {playStr,pauseStr} (optional)
- playStr: Is the string value use when the audio is playing (works best with audIcons(name))
- pauseStr: Is the string value use when the audio is paused (works best with audIcons(name))
- styles: an object with two keys {on,off} (optional)
- on: The css styles for the specified html element when the audio is playing
- off: The css styles for the specified html element when the audio is paused
Backward and Forward
goBack(audList, { el: null, names: null })
goForward(audList, { el: null, names: null })
- audList: An array containing list of audios to navigate (required) The following are optional but once the "el" is specified, the names will be required
- el: The element that displays the name of the playing audio (required)
- names: An array containing list of audios' names to navigate (required)
Mute and Unmute
muteNunmute(el, muteStr, unmuteStr)
- el: The html element acting as the mute button
- muteStr: Text/Icon to show when the audio is muted
- unmuteStr: Text/Icon to show when the audio is not muted
Looping
loopNunloop(
el,
options = {
loopStr: "loop",
unloopStr: "unloop",
},
styles = { on: null, off: null }
)
The application is the same as the one for playing and pausing the audio
Changing the volume
changeVolume(el)
el: The html element acting as the volume slider (should be a range input element) (required).
This works oninput and onchange events in javascript
Changing the audio position
changeAudPosition(el)
el: The html element acting as the audio seek slider (should be a range input element) (required).
This works oninput and onchange events in javascript
Updating the audio's time
updateAudTime(el)
el: The html element acting as the audio seek slider (should be a range input element) (required).
This works ontimeupdate event on audio in javascript