HTML 5 audio play based on id from SQL

Question

I'm trying to play music from my folder based on sql location and is working just fine but only with first audio..and i need to play all audio based on id or something. Some help needed. Thanks!

PHP + HTML Code for this player:

<?php
  $q = mysqli_query($db,"SELECT * FROM music ");
   while ($row = mysqli_fetch_assoc($q)) {
        $id = $row['id'];
        $location = $row['location'];
        $name = $row['name'];
        $trackname = $row['trackname'];

?>
<div class="player paused">
   <div class="album">
    <div class="cover">
      <div><img src="https://www.liveout.ro/media/events/cover_picture/140763_4269419504711467855267480452363124163978086831790255925789106330.jpg" /></div>
    </div>
  </div>

  <div class="info">
    <div class="time">
      <span class="current-time">0:00</span>
      <span class="progress"><span></span></span>
      <span class="duration">0:00</span>
    </div>

    <h2><?php echo $name;?></h2>
    <h3><?php echo $trackname;?></h3>
   </div>

  <div class="actions">
     <button class="buttn rw">
      <div class="arrow"></div>
      <div class="arrow"></div>
    </button>
    <button class="buttn play-pause">
      <div class="arrow"></div>
    </button>
    <button class="buttn ff">
      <div class="arrow"></div>
      <div class="arrow"></div>
    </button>
   </div>

  <audio preload src="<?php echo $location;?>" id="music" track="<?php echo $id;?>"></audio>
</div>
<?php } ?>

This is the JAVASCRIPT Code for this Player:

I think here has to be some changes to work..

var player = $('.player'),
    audio = player.find('audio'),
    duration = $('.duration'),
    currentTime = $('.current-time'),
    progressBar = $('.progress span'),
    mouseDown = false,
    rewind, showCurrentTime;

function secsToMins(time) {
  var int = Math.floor(time),
      mins = Math.floor(int / 60),
      secs = int % 60,
      newTime = mins + ':' + ('0' + secs).slice(-2);

  return newTime;
}

function getCurrentTime() {
  var currentTimeFormatted = secsToMins(audio[0].currentTime),
      currentTimePercentage = audio[0].currentTime / audio[0].duration * 100;

  currentTime.text(currentTimeFormatted);
  progressBar.css('width', currentTimePercentage + '%');

  if (player.hasClass('playing')) {
    showCurrentTime = requestAnimationFrame(getCurrentTime);
  } else {
    cancelAnimationFrame(showCurrentTime);
  }
}

audio.on('loadedmetadata', function() {
  var durationFormatted = secsToMins(audio[0].duration);
  duration.text(durationFormatted);
}).on('ended', function() {
  if ($('.repeat').hasClass('active')) {
    audio[0].currentTime = 0;
    audio[0].play();
  } else {
    player.removeClass('playing').addClass('paused');
    audio[0].currentTime = 0;
  }
});

$('button').on('click', function() {
  var self = $(this);

  if (self.hasClass('play-pause') && player.hasClass('paused')) {
    player.removeClass('paused').addClass('playing');
    audio[0].play();
    getCurrentTime();
  } else if (self.hasClass('play-pause') && player.hasClass('playing')) {
    player.removeClass('playing').addClass('paused');
    audio[0].pause();
  }

  if (self.hasClass('shuffle') || self.hasClass('repeat')) {
    self.toggleClass('active');
  }
}).on('mousedown', function() {
  var self = $(this);

  if (self.hasClass('ff')) {
    player.addClass('ffing');
    audio[0].playbackRate = 2;
  }

  if (self.hasClass('rw')) {
    player.addClass('rwing');
    rewind = setInterval(function() { audio[0].currentTime -= .3; }, 100);
  }
}).on('mouseup', function() {
  var self = $(this);

  if (self.hasClass('ff')) {
    player.removeClass('ffing');
    audio[0].playbackRate = 1;
  }

  if (self.hasClass('rw')) {
    player.removeClass('rwing');
    clearInterval(rewind);
  }
});

player.on('mousedown mouseup', function() {
  mouseDown = !mouseDown;
});

progressBar.parent().on('click mousemove', function(e) {
  var self = $(this),
      totalWidth = self.width(),
      offsetX = e.offsetX,
      offsetPercentage = offsetX / totalWidth;

  if (mouseDown || e.type === 'click') {
    audio[0].currentTime = audio[0].duration * offsetPercentage;
    if (player.hasClass('paused')) {
      progressBar.css('width', offsetPercentage * 100 + '%');
    }
  }
});

Answer 1

Only the first audio is working, because you are using audio[0] everywhere. In order to fix your code to work for all audios, you have to do the following:

1) Substitute audio[0] inside the event listeners of audio (loadedmetadata, ended) with this, in order to refer to the current audio, not the first audio in the jQuery object.

2) Substitute audio[0] in the event listeners of $("button") (click, mousedown, mouseup) and progressBar.parent() (click, mousemove) with the following:

var currentAudio = self.closest(".player").children("audio").get(0);

3) Pass the current audio as the context to getCurrentTime using:

• getCurrentTime.bind(this) when passing it to requestAnimationFrame.
• getCurrentTime.call(currentAudio) inside $("button").on("click", ...).

Code:

var player = $('.player'),
  audio = player.find('audio'),
  duration = $('.duration'),
  currentTime = $('.current-time'),
  progressBar = $('.progress span'),
  mouseDown = false,
  rewind, showCurrentTime;

function secsToMins(time) {
  var int = Math.floor(time),
    mins = Math.floor(int / 60),
    secs = int % 60,
    newTime = mins + ':' + ('0' + secs).slice(-2);

  return newTime;
}

function getCurrentTime() {   // 'this' refers to the current audio.
  var currentTimeFormatted = secsToMins(this.currentTime),
    currentTimePercentage = this.currentTime / this.duration * 100;

  currentTime.text(currentTimeFormatted);
  progressBar.css('width', currentTimePercentage + '%');

  if (player.hasClass('playing')) {
    showCurrentTime = requestAnimationFrame(getCurrentTime.bind(this));
  } else {
    cancelAnimationFrame(showCurrentTime);
  }
}

audio.on('loadedmetadata', function() {
  var durationFormatted = secsToMins(this.duration);
  duration.text(durationFormatted);
}).on('ended', function() {
  if ($('.repeat').hasClass('active')) {
    this.currentTime = 0;
    this.play();
  } else {
    player.removeClass('playing').addClass('paused');
    this.currentTime = 0;
  }
});

$('button').on('click', function() {
  var
    self = $(this),
    currentAudio = self.closest(".player").children("audio").get(0);

  if (self.hasClass('play-pause') && player.hasClass('paused')) {
    player.removeClass('paused').addClass('playing');
    currentAudio.play();
    getCurrentTime.call(currentAudio);
  } else if (self.hasClass('play-pause') && player.hasClass('playing')) {
    player.removeClass('playing').addClass('paused');
    currentAudio.pause();
  }

  if (self.hasClass('shuffle') || self.hasClass('repeat')) {
    self.toggleClass('active');
  }
}).on('mousedown', function() {
  var
    self = $(this),
    currentAudio = self.closest(".player").children("audio").get(0);

  if (self.hasClass('ff')) {
    player.addClass('ffing');
    currentAudio.playbackRate = 2;
  }

  if (self.hasClass('rw')) {
    player.addClass('rwing');
    rewind = setInterval(function() {
      currentAudio.currentTime -= .3;
    }, 100);
  }
}).on('mouseup', function() {
  var
    self = $(this),
    currentAudio = self.closest(".player").children("audio").get(0);

  if (self.hasClass('ff')) {
    player.removeClass('ffing');
    currentAudio.playbackRate = 1;
  }

  if (self.hasClass('rw')) {
    player.removeClass('rwing');
    clearInterval(rewind);
  }
});

player.on('mousedown mouseup', function() {
  mouseDown = !mouseDown;
});

progressBar.parent().on('click mousemove', function(e) {
  var
    self = $(this),
    currentAudio = self.closest(".player").children("audio").get(0),
    totalWidth = self.width(),
    offsetX = e.offsetX,
    offsetPercentage = offsetX / totalWidth;

  if (mouseDown || e.type === 'click') {
    currentAudio.currentTime = currentAudio.duration * offsetPercentage;
    if (player.hasClass('paused')) {
      progressBar.css('width', offsetPercentage * 100 + '%');
    }
  }
});

Note: Every audio element has id="music", whereas each id is meant to be unique, so you might want to change that, if you actually want your audios to have ids.