AudioPlayer

Setup

To set up, here is the code

import {startup, AudioPlayer} from 'js/es6/mediaviewer.js';
startup(); //Loads up the library

/**
 * Creates an Audio player
 * @param {String} container Container to load the player
 * @param {{controls: Boolean, skipRate: Number, autoplay: Boolean, loop: Boolean, shuffle: Boolean, preloaded: 'auto'|'metadata'|'none', playlists:[...src:[{img: String, path: String, title: String, artist: String, album: String}], tracks: [...{src: string, kind: string, srclang: string, label: string}]]}} config 
 * @param {{}} styles Styles
 * @param {boolean} [trigger=true] Active the event
 */
new AudioPlayer('.demo', {
// configurations
},
{
// CSS AudioPlayer variables
});

Configurations

Label	Type	Values	Default	Description	Required
autoplay	Boolean	true, false	false	Automatically plays video on document click	✖️
preloaded	String	'auto', 'metadata', 'none'	auto	Adds a preload to the video	✖️
controls	Boolean	true, false	true	Adds controls	✖️
loop	Boolean	true, false	true	Loops audio	✖️
shuffle	Boolean	true, false	true	Shuffles audio	✖️
playlists	Object[]		[]	Creates a playlists	✔️
playlists.src	Object[]		[]	Generate sources for the video	✔️
playlists.src.path	String			Audio path	✔️
playlists.src.image	String			Audio image	✔️
playlists.src.title	String			Audio title	✔️
playlists.src.artist	String			Audio artist	✔️
playlists.src.album	String			Audio album	✔️
playlists.tracks	Object[]		[]	Generates tracks to the video	✖️
playlists.tracks.src	String			Path to use as a track	✖️
playlists.tracks.kind	String	captions, chapters, descriptions, metadata, subtitles		The type of track	✖️
playlists.tracks.srclang	String			Soruce language	✖️
playlists.tracks.label	String			Label the track	✖️
skipRate	Integer	+ ♾️	5	Skips the number of seconds based on left/right keys	✖️

Styles

Certainly! Here is the updated style variable table with your new variables:

Variable	Name	Values	Default	Description
--audio-playlist-background	playlist-background	Color	#04070b	Audio playlist background color
--audio-playlist-color	playlist-color	Color	#afcde2	Audio playlist text color
--audio-playlist-heading	playlist-heading	Color	#9ca4aa	Audio playlist heading color
--audio-playlist-hover	playlist-hover	Color	rgb(102, 177, 204, 0.85)	Hover color for playlist items
--audio-playlist-hover-color	playlist-hover-color	Color	#fff	Playlist item hover text color
--audio-player-container-bg	player-container-bg	Color	#5d5d5d	Background color of audio player container
--audio-player-container-color	player-container-color	Color	255, 255, 255	Text color inside audio player container (RGB values)
--audio-progress	progress-background	Color	#363636	Audio progress background color
--audio-progress-bar	progress-bar	Color	#09cbf2	Audio progress bar color
--audio-progress-hover	progress-hover	Color	#d8d8d8	Hover color for progress bar
--audio-progress-buffer	progress-buffer	Color	rgba(170, 170, 170, 0.85)	Buffer bar color
--audio-captions-bg	captions-bg	Color	rgba(0,0,0,0.85)	Captions background color
--audio-captions-color	captions-color	Color	#fefefe	Captions text color
--audio-loop-active	loop-active	Color	#74c039	Loop active indicator color

HTML

To operate in HTML, use the following code

<!--Replace ... with any of the valid configurations-->
<div media-audio-player controls ...>
    <playlists>
        <audioplayer title="Scarlet Vow (Halloween Song  NEW EP!)" data-artist="Aviators" data-album="The Twist at The End" data-img="https://i.ytimg.com/vi/EcqO6XO5jA8/hqdefault.jpg?sqp=-oaymwEnCNACELwBSFryq4qpAxkIARUAAIhCGAHYAQHiAQoIGBACGAY4AUAB&rs=AOn4CLD_CDQlODWy6U-hQwVqPdnFszB5xQ" ...>
            <audio src="audios/music1.mp3" ...></audio>
        </audioplayer>
        <audioplayer title="WE GOT THE MOVES" data-artist="Electric Callboy" data-album="TEKKNO" data-img="https://i.ytimg.com/vi/D1NdGBldg3w/hqdefault.jpg?sqp=-oaymwEmCKgBEF5IWvKriqkDGQgBFQAAiEIYAdgBAeIBCggYEAIYBjgBQAE=&rs=AOn4CLC2i0H1zkWZme9jl7nx56BSWAvJUQ" ...>
            <audio src="audios/music2.mp3" ...></audio>
            <track src="tracks/we_got_the_moves_de.vtt" kind="captions" label="German" srclang="de" ...>
            <track src="tracks/we_got_the_moves_en.vtt" kind="captions" label="English" srclang="en" ...>
        </audioplayer>
        <audioplayer title="Everytime We Touch" data-artist="Cascada" data-album="Studio album" data-img="https://i.ytimg.com/vi/4G6QDNC4jPs/hqdefault.jpg?sqp=-oaymwEnCNACELwBSFryq4qpAxkIARUAAIhCGAHYAQHiAQoIGBACGAY4AUAB&rs=AOn4CLByLvBwmLBLIG6GokBzcC6q89fUtw" ...>
            <audio src="audios/music3.mp3" ...></audio>
            <track src="tracks/everytime_we_touch_lyrics.vtt" kind="captions" label="English" srclang="en" ...>
        </audioplayer>
    </playlists>
</div>
<script type="module" src="autoloader.js"></script>