基于 SQL 中的 id 的 HTML 5 音频播放

Question

我正在尝试根据 sql 位置从我的文件夹中播放音乐，并且工作得很好，但只有第一个音频..我需要根据 id 或其他东西播放所有音频。需要一些帮助。谢谢！

此播放器的 PHP + HTML 代码：

<?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 } ?>

这是此播放器的 JAVASCRIPT 代码：

我认为这里必须进行一些更改才能起作用..

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

只有第一个音频有效，因为您到处都在使用audio[0]。为了修复您的代码以适用于所有音频，您必须执行以下操作：

1) 用this 替换audio 的事件监听器中的audio[0] (loadedmetadata, ended)，以便引用当前的audio，而不是jQuery 对象中的第一个audio。

2) 在$("button") 的事件监听器中替换audio[0] (click, mousedown, mouseup) 和progressBar.parent() >(click, mousemove) 如下：

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

3) 将当前audio 作为上下文传递给getCurrentTime，使用：

• getCurrentTime.bind(this) 传递给 requestAnimationFrame 时。
• getCurrentTime.call(currentAudio) 内$("button").on("click", ...)。

代码：

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 + '%');
    }
  }
});

注意：每个audio 元素都有id="music"，而每个id 都是唯一的，所以如果你真的希望你的音频有ID，你可能想要改变它.