Как воспроизводить музыку из массива js

Question

Есть две кнопки: вправо и влево. И есть музыка в html. Как сделать js код, чтобы при нажатии на кнопки музыка "листалась"? Нажимаешь вперед-играет следующая песня, назад-предыдущая

Answer 1

Например такая реализация, но думаю лучше найти готовые решения плееров.

let tracklist = [
  {
    url: 'https://mp3minusovki.com/music/fhvndfjwserjgt/247bab1c312b2335afe3f5c9b496a3d3/854262e8b9de720784c0a4491e49912f.mp3',
    name: 'Mr.Credo - Чудная долина'
  },
  {
    url: 'https://w4.bestmusicss.ru/files/music/2019/10/Bomfunk_MCs_-_Freestyler.mp3',
    name: 'Bomfunk MC\'s - Freestyler'
  },
  {
    url: 'https://layllo.ru/uploads/2021/02/14/17/Loqiemean-solnechnaja-storona_Rayhon.me.mp3',
    name: 'Loqiemean - Солнечная сторона'
  }
],
    audio = new Audio(),
    cur_track = 0,
    vol_step = .05; // шаг громкости
    
audio.volume = .25;

document.addEventListener('click', function(e){
  if(e.target.classList.contains('player')) {
    console.clear();
    let t = e.target;
    if(t.id === 'play') {
      audio.src = tracklist[cur_track].url;
      audio.play();
      //
      t.style.display = 'none';
      document.querySelector('#stop').style.display = '';
      console.info(`Играет: ${tracklist[cur_track].name}`);
    }
    
    if(t.id === 'stop') {
      audio.pause();
      //
      t.style.display = 'none';
      document.querySelector('#play').style.display = '';
      console.info('Пауза');
    }
    
    if(t.id === 'prev' || t.id === 'next') {
      cur_track = t.id === 'prev' ? cur_track-1 < 0 ? tracklist.length-1 : cur_track-1 : cur_track+1 >= tracklist.length ? 0 : cur_track+1;
      //
      audio.src = tracklist[cur_track].url;
      audio.play();
      //
      document.querySelector('#play').style.display = 'none';
      document.querySelector('#stop').style.display = '';
      console.info(`Играет: ${tracklist[cur_track].name}`);
    }
    
    if(t.id === 'vol-d' || t.id === 'vol-u') {
      audio.volume = t.id === 'vol-d' ? audio.volume  >= 0 ? audio.volume -= vol_step : 0 : audio.volume <= 1 ? audio.volume += vol_step : 1;
      document.querySelector('#volume').innerText = Math.round(audio.volume * 100)+'%';
    }
  }
});

<input id="play" class="player" type="button" value="▶">
<input id="stop" class="player" type="button" value="⏹" style="display: none;">
<input id="prev" class="player" type="button" value="⏮">
<input id="next" class="player" type="button" value="⏭">
<!-- избегаю последующих вопросов --> | 
<input id="vol-d" class="player" type="button" value="➖">
<span id="volume">25%</span>
<input id="vol-u" class="player" type="button" value="➕">

БЛОГ НА HUSL

Как воспроизводить музыку из массива js

Ответы (1 шт):