Need 'shuffleButton'?

Hi all.

I’m all, first time here and really need a hand.
I’m trying to include a ‘shuffle’ button to shuffle the playlist in my online audio player.
All tracks are in a folder and the player currently lists all the tracks alphabetically.
I would like to have the playlist shuffle once when it loads and a button on the player for the user to re-shuffle.

Here’s the code:

const musicContainer = document.getElementById('music-container');
const playBtn = document.getElementById('play');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');

const audio = document.getElementById('audio');
const progress = document.getElementById('progress');
const progressContainer = document.getElementById('progress-container');
const title = document.getElementById('title');
const cover = document.getElementById('cover');
const currTime = document.querySelector('#currTime');
const durTime = document.querySelector('#durTime');

// Song titles
const songs = [
  '70s Sons - USA - Climb',
  'A Good Rogering - USA - Face Value',
  'A Permanent Shadow - Spain - Beautiful People',
  'Abandoned Playground - Sweden - Dead Bones',
  'aDTR-Thunda-ID Stinger',
  'Aition - Finland - Beata',
  'Ambrose Gibbs - USA - Searching To Find Myself',
  'Amnesia Blues Band - Australia - Nullabor Blues',

// Keep track of song
let songIndex = 1;

// Initially load song details into DOM

// Update song details
function loadSong(song) {
  title.innerText = song;
  audio.src = `music/${song}.mp3`;
  cover.src = `images/${song}.jpg`;

// Play song
function playSong() {

// Pause song
function pauseSong() {


// Previous song
function prevSong() {

  if (songIndex < 0) {
    songIndex = songs.length - 1;



// Next song
function nextSong() {

  if (songIndex > songs.length - 1) {
    songIndex = 0;



// Update progress bar
function updateProgress(e) {
  const { duration, currentTime } = e.srcElement;
  const progressPercent = (currentTime / duration) * 100; = `${progressPercent}%`;

// Set progress bar
function setProgress(e) {
  const width = this.clientWidth;
  const clickX = e.offsetX;
  const duration = audio.duration;

  audio.currentTime = (clickX / width) * duration;

// Event listeners
playBtn.addEventListener('click', () => {
  const isPlaying = musicContainer.classList.contains('play');

  if (isPlaying) {
  } else {

// Change song
prevBtn.addEventListener('click', prevSong);
nextBtn.addEventListener('click', nextSong);

// Time/song update
audio.addEventListener('timeupdate', updateProgress);

// Click on progress bar
progressContainer.addEventListener('click', setProgress);

// Song ends
audio.addEventListener('ended', nextSong);

// Time of song

I’ve tried adding the line

const shuffleBtn = document.getElementById(‘shuffle’);

but can’t seem to get it to function

Can’t you just shuffle the array? That, or pick the elements using random numbers for the index.

What constitutes a “good” playlist shuffle algorithm is also not set in stone.

What is it you expect that line of code to do on its own?

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Do you have another codes?

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.