code-boxx/0-JS-AUDIO-PLAYLIST.MD

## 0-JS-AUDIO-PLAYLIST.MD

      
    Raw
  

              0-JS-AUDIO-PLAYLIST.MD
            
          
    JAVASCRIPT CUSTOM AUDIO PLAYER WITH PLAYLIST

https://code-boxx.com/custom-audio-player-playlist/
NOTES


No audio files are provided, download your own.
Edit player.js, set the videos in let playlist = [...].

LICENSE

Copyright by Code Boxx
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

  
## player.css
/* (A) MATERIAL ICONS */
.material-icons {
  font-size: 28px;
  color: #efff6a;
}

/* (B) WRAPPER */
#aWrap {
  font-family: arial, sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  max-width: 500px;
  padding: 10px;
  border-radius: 10px;
  background: #484848;
}

/* (C) PLAY/PAUSE BUTTON */
#aPlay {
  padding: 0;
  margin: 0;
  background: 0;
  border: 0;
  cursor: pointer;
}

/* (D) TIME */
#aCron {
  font-size: 14px;
  color: #cbcbcb;
  margin: 0 10px;
}

/* (E) RANGE SLIDERS */
/* (E1) HIDE DEFAULT */
#aWrap input[type="range"] {
  box-sizing: border-box;
  appearance: none;
  border: none;
  outline: none;
  box-shadow: none;
  width: 150px;
  padding: 0;
  margin: 0;
  background: 0;
}
#aWrap input[type="range"]::-webkit-slider-thumb {
  appearance: none;
}

/* (E2) CUSTOM SLIDER TRACK */
#aWrap input[type=range]::-webkit-slider-runnable-track {
  background: #626262;
}
#aWrap input[type=range]::-moz-range-track {
  background: #626262;
}

/* (E3) CUSTOM SLIDER BUTTON */
#aWrap input[type=range]::-webkit-slider-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 0;
  background: #fff;
}
#aWrap input[type=range]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 0;
  background: #fff;
}

/* (F) VOLUME */
#aVolIco {
  margin: 0 10px;
  cursor: pointer;
}

/* (G) PLAYLIST */
#aList {
  width: 100%;
  padding: 10px;
  margin: 10px;
  color: #7e7e7e;
  background: #323232;
}
.aRow {
  cursor: pointer;
  padding: 10px 0;
}
.aRow.now {
  color: #fea;
}

## player.html
<!DOCTYPE html>
<html>
  <head>
    <title>Custom HTML Audio Player</title>

    <!-- CSS & JS -->
    <!-- https://fonts.google.com/icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="player.css">
    <script defer src="player.js"></script>
  </head>
  <body>
    <div id="aWrap">
      <!-- (A) PLAY/PAUSE BUTTON -->
      <button id="aPlay" disabled><span id="aPlayIco" class="material-icons">
        play_arrow
      </span></button>

      <!-- (B) TIME -->
      <div id="aCron">
        <span id="aNow"></span> / <span id="aTime"></span>
      </div>

      <!-- (C) SEEK BAR -->
      <input id="aSeek" type="range" min="0" value="0" step="1" disabled>

      <!-- (D) VOLUME SLIDE -->
      <span id="aVolIco" class="material-icons">volume_up</span>
      <input id="aVolume" type="range" min="0" max="1" value="1" step="0.1" disabled>

      <!-- (E) PLAYLIST -->
      <div id="aList"></div>
    </div>
  </body>
</html>

## player.js
window.addEventListener("DOMContentLoaded", () => {
  // (A) PLAYER INIT
  // (A1) PLAYLIST - CHANGE TO YOUR OWN!
  let playlist = [
    {name: "Sugar Plum Fairy", src: "S1.mp3"},
    {name: "If I Had A Chicken", src: "S2.mp3"},
    {name: "Run Little Chicken", src: "S3.mp3"}
  ];

  // (A2) AUDIO PLAYER & GET HTML CONTROLS
  const audio = new Audio(),
        aPlay = document.getElementById("aPlay"),
        aPlayIco = document.getElementById("aPlayIco"),
        aNow = document.getElementById("aNow"),
        aTime = document.getElementById("aTime"),
        aSeek = document.getElementById("aSeek"),
        aVolume = document.getElementById("aVolume"),
        aVolIco = document.getElementById("aVolIco"),
        aList = document.getElementById("aList");

  // (A3) BUILD PLAYLIST
  for (let i in playlist) {
    let row = document.createElement("div");
    row.className = "aRow";
    row.innerHTML = playlist[i]["name"];
    row.addEventListener("click", () => audPlay(i));
    playlist[i]["row"] = row;
    aList.appendChild(row);
  }

  // (B) PLAY MECHANISM
  // (B1) FLAGS
  var audNow = 0, // current song
      audStart = false, // auto start next song

  // (B2) PLAY SELECTED SONG
  audPlay = (idx, nostart) => {
    audNow = idx;
    audStart = nostart ? false : true;
    audio.src = encodeURI(playlist[idx]["src"]);
    for (let i in playlist) {
      if (i == idx) { playlist[i]["row"].classList.add("now"); }
      else { playlist[i]["row"].classList.remove("now"); }
    }
  };

  // (B3) AUTO START WHEN SUFFICIENTLY BUFFERED
  audio.addEventListener("canplay", () => { if (audStart) {
    audio.play();
    audStart = false;
  }});

  // (B4) AUTOPLAY NEXT SONG IN THE PLAYLIST
  audio.addEventListener("ended", () => {
    audNow++;
    if (audNow >= playlist.length) { audNow = 0; }
    audPlay(audNow);
  });

  // (B5) INIT SET FIRST SONG
  audPlay(0, true);

  // (C) PLAY/PAUSE BUTTON
  // (C1) AUTO SET PLAY/PAUSE TEXT
  audio.addEventListener("play", () => aPlayIco.innerHTML = "pause");
  audio.addEventListener("pause", () => aPlayIco.innerHTML = "play_arrow");

  // (C2) CLICK TO PLAY/PAUSE
  aPlay.addEventListener("click", () => {
    if (audio.paused) { audio.play(); }
    else { audio.pause(); }
  });

  // (D) TRACK PROGRESS
  // (D1) SUPPORT FUNCTION - FORMAT HH:MM:SS
  var timeString = secs => {
    // (D1-1) HOURS, MINUTES, SECONDS
    let ss = Math.floor(secs),
        hh = Math.floor(ss / 3600),
        mm = Math.floor((ss - (hh * 3600)) / 60);
    ss = ss - (hh * 3600) - (mm * 60);

    // (D1-2) RETURN FORMATTED TIME
    if (hh>0) { mm = mm<10 ? "0"+mm : mm; }
    ss = ss<10 ? "0"+ss : ss;
    return hh>0 ? `${hh}:${mm}:${ss}` : `${mm}:${ss}` ;
  };

  // (D2) INIT SET TRACK TIME
  audio.addEventListener("loadedmetadata", () => {
    aNow.innerHTML = timeString(0);
    aTime.innerHTML = timeString(audio.duration);
  });

  // (D3) UPDATE TIME ON PLAYING
  audio.addEventListener("timeupdate", () => aNow.innerHTML = timeString(audio.currentTime));

  // (E) SEEK BAR
  audio.addEventListener("loadedmetadata", () => {
    // (E1) SET SEEK BAR MAX TIME
    aSeek.max = Math.floor(audio.duration);

    // (E2) USER CHANGE SEEK BAR TIME
    var aSeeking = false; // user is now changing time
    aSeek.addEventListener("input", () => aSeeking = true); // prevents clash with (e3)
    aSeek.addEventListener("change", () => {
      audio.currentTime = aSeek.value;
      if (!audio.paused) { audio.play(); }
      aSeeking = false;
    });

    // (E3) UPDATE SEEK BAR ON PLAYING
    audio.addEventListener("timeupdate", () => {
      if (!aSeeking) { aSeek.value = Math.floor(audio.currentTime); }
    });
  });

  // (F) VOLUME
  aVolIco.addEventListener("click", () => {
    audio.volume = audio.volume==0 ? 1 : 0 ;
    aVolume.value = audio.volume;
    aVolIco.innerHTML = (aVolume.value==0 ? "volume_mute" : "volume_up");
  });
  aVolume.addEventListener("change", () => {
    audio.volume = aVolume.value;
    aVolIco.innerHTML = (aVolume.value==0 ? "volume_mute" : "volume_up");
  });

  // (G) ENABLE/DISABLE CONTROLS
  audio.addEventListener("canplay", () => {
    aPlay.disabled = false;
    aVolume.disabled = false;
    aSeek.disabled = false;
  });
  audio.addEventListener("waiting", () => {
    aPlay.disabled = true;
    aVolume.disabled = true;
    aSeek.disabled = true;
  });
});
	/* (A) MATERIAL ICONS */
	.material-icons {
	font-size: 28px;
	color: #efff6a;
	}

	/* (B) WRAPPER */
	#aWrap {
	font-family: arial, sans-serif;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	box-sizing: border-box;
	max-width: 500px;
	padding: 10px;
	border-radius: 10px;
	background: #484848;
	}

	/* (C) PLAY/PAUSE BUTTON */
	#aPlay {
	padding: 0;
	margin: 0;
	background: 0;
	border: 0;
	cursor: pointer;
	}

	/* (D) TIME */
	#aCron {
	font-size: 14px;
	color: #cbcbcb;
	margin: 0 10px;
	}

	/* (E) RANGE SLIDERS */
	/* (E1) HIDE DEFAULT */
	#aWrap input[type="range"] {
	box-sizing: border-box;
	appearance: none;
	border: none;
	outline: none;
	box-shadow: none;
	width: 150px;
	padding: 0;
	margin: 0;
	background: 0;
	}
	#aWrap input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	}

	/* (E2) CUSTOM SLIDER TRACK */
	#aWrap input[type=range]::-webkit-slider-runnable-track {
	background: #626262;
	}
	#aWrap input[type=range]::-moz-range-track {
	background: #626262;
	}

	/* (E3) CUSTOM SLIDER BUTTON */
	#aWrap input[type=range]::-webkit-slider-thumb {
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	}
	#aWrap input[type=range]::-moz-range-thumb {
	width: 16px; height: 16px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	}

	/* (F) VOLUME */
	#aVolIco {
	margin: 0 10px;
	cursor: pointer;
	}

	/* (G) PLAYLIST */
	#aList {
	width: 100%;
	padding: 10px;
	margin: 10px;
	color: #7e7e7e;
	background: #323232;
	}
	.aRow {
	cursor: pointer;
	padding: 10px 0;
	}
	.aRow.now {
	color: #fea;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Custom HTML Audio Player</title>

	<!-- CSS & JS -->
	<!-- https://fonts.google.com/icons -->
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="player.css">
	<script defer src="player.js"></script>
	</head>
	<body>
	<div id="aWrap">
	<!-- (A) PLAY/PAUSE BUTTON -->
	<button id="aPlay" disabled><span id="aPlayIco" class="material-icons">
	play_arrow
	</span></button>

	<!-- (B) TIME -->
	<div id="aCron">
	<span id="aNow"></span> / <span id="aTime"></span>
	</div>

	<!-- (C) SEEK BAR -->
	<input id="aSeek" type="range" min="0" value="0" step="1" disabled>

	<!-- (D) VOLUME SLIDE -->
	<span id="aVolIco" class="material-icons">volume_up</span>
	<input id="aVolume" type="range" min="0" max="1" value="1" step="0.1" disabled>

	<!-- (E) PLAYLIST -->
	<div id="aList"></div>
	</div>
	</body>
	</html>
	window.addEventListener("DOMContentLoaded", () => {
	// (A) PLAYER INIT
	// (A1) PLAYLIST - CHANGE TO YOUR OWN!
	let playlist = [
	{name: "Sugar Plum Fairy", src: "S1.mp3"},
	{name: "If I Had A Chicken", src: "S2.mp3"},
	{name: "Run Little Chicken", src: "S3.mp3"}
	];

	// (A2) AUDIO PLAYER & GET HTML CONTROLS
	const audio = new Audio(),
	aPlay = document.getElementById("aPlay"),
	aPlayIco = document.getElementById("aPlayIco"),
	aNow = document.getElementById("aNow"),
	aTime = document.getElementById("aTime"),
	aSeek = document.getElementById("aSeek"),
	aVolume = document.getElementById("aVolume"),
	aVolIco = document.getElementById("aVolIco"),
	aList = document.getElementById("aList");

	// (A3) BUILD PLAYLIST
	for (let i in playlist) {
	let row = document.createElement("div");
	row.className = "aRow";
	row.innerHTML = playlist[i]["name"];
	row.addEventListener("click", () => audPlay(i));
	playlist[i]["row"] = row;
	aList.appendChild(row);
	}

	// (B) PLAY MECHANISM
	// (B1) FLAGS
	var audNow = 0, // current song
	audStart = false, // auto start next song

	// (B2) PLAY SELECTED SONG
	audPlay = (idx, nostart) => {
	audNow = idx;
	audStart = nostart ? false : true;
	audio.src = encodeURI(playlist[idx]["src"]);
	for (let i in playlist) {
	if (i == idx) { playlist[i]["row"].classList.add("now"); }
	else { playlist[i]["row"].classList.remove("now"); }
	}
	};

	// (B3) AUTO START WHEN SUFFICIENTLY BUFFERED
	audio.addEventListener("canplay", () => { if (audStart) {
	audio.play();
	audStart = false;
	}});

	// (B4) AUTOPLAY NEXT SONG IN THE PLAYLIST
	audio.addEventListener("ended", () => {
	audNow++;
	if (audNow >= playlist.length) { audNow = 0; }
	audPlay(audNow);
	});

	// (B5) INIT SET FIRST SONG
	audPlay(0, true);

	// (C) PLAY/PAUSE BUTTON
	// (C1) AUTO SET PLAY/PAUSE TEXT
	audio.addEventListener("play", () => aPlayIco.innerHTML = "pause");
	audio.addEventListener("pause", () => aPlayIco.innerHTML = "play_arrow");

	// (C2) CLICK TO PLAY/PAUSE
	aPlay.addEventListener("click", () => {
	if (audio.paused) { audio.play(); }
	else { audio.pause(); }
	});

	// (D) TRACK PROGRESS
	// (D1) SUPPORT FUNCTION - FORMAT HH:MM:SS
	var timeString = secs => {
	// (D1-1) HOURS, MINUTES, SECONDS
	let ss = Math.floor(secs),
	hh = Math.floor(ss / 3600),
	mm = Math.floor((ss - (hh * 3600)) / 60);
	ss = ss - (hh * 3600) - (mm * 60);

	// (D1-2) RETURN FORMATTED TIME
	if (hh>0) { mm = mm<10 ? "0"+mm : mm; }
	ss = ss<10 ? "0"+ss : ss;
	return hh>0 ? `${hh}:${mm}:${ss}` : `${mm}:${ss}` ;
	};

	// (D2) INIT SET TRACK TIME
	audio.addEventListener("loadedmetadata", () => {
	aNow.innerHTML = timeString(0);
	aTime.innerHTML = timeString(audio.duration);
	});

	// (D3) UPDATE TIME ON PLAYING
	audio.addEventListener("timeupdate", () => aNow.innerHTML = timeString(audio.currentTime));

	// (E) SEEK BAR
	audio.addEventListener("loadedmetadata", () => {
	// (E1) SET SEEK BAR MAX TIME
	aSeek.max = Math.floor(audio.duration);

	// (E2) USER CHANGE SEEK BAR TIME
	var aSeeking = false; // user is now changing time
	aSeek.addEventListener("input", () => aSeeking = true); // prevents clash with (e3)
	aSeek.addEventListener("change", () => {
	audio.currentTime = aSeek.value;
	if (!audio.paused) { audio.play(); }
	aSeeking = false;
	});

	// (E3) UPDATE SEEK BAR ON PLAYING
	audio.addEventListener("timeupdate", () => {
	if (!aSeeking) { aSeek.value = Math.floor(audio.currentTime); }
	});
	});

	// (F) VOLUME
	aVolIco.addEventListener("click", () => {
	audio.volume = audio.volume==0 ? 1 : 0 ;
	aVolume.value = audio.volume;
	aVolIco.innerHTML = (aVolume.value==0 ? "volume_mute" : "volume_up");
	});
	aVolume.addEventListener("change", () => {
	audio.volume = aVolume.value;
	aVolIco.innerHTML = (aVolume.value==0 ? "volume_mute" : "volume_up");
	});

	// (G) ENABLE/DISABLE CONTROLS
	audio.addEventListener("canplay", () => {
	aPlay.disabled = false;
	aVolume.disabled = false;
	aSeek.disabled = false;
	});
	audio.addEventListener("waiting", () => {
	aPlay.disabled = true;
	aVolume.disabled = true;
	aSeek.disabled = true;
	});
	});