Нужна помощь в улучшении аудио плеера с обложками и артистами - PullRequest
0 голосов
/ 07 мая 2019

Я хочу улучшить аудиоплеер на сайте группы. Я использую легкий и мощный скрипт с jquery-1.7. Я хотел бы улучшить игрока с помощью художника и предметов обложки. Я искал и пытался, но не нашел решения, совместимого с моим сценарием.

$(window).load(function() {

  var audio, playlist, tracks, current;

  init();

  function init() {
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length;
    audio[0].volume = .60;
    playlist.find('a').click(function(e) {
      e.preventDefault();
      link = $(this);
      current = link.parent().index();
      run(link, audio[0]);
    });
    audio[0].addEventListener('ended', function(e) {
      current++;
      if (current == len) {
        current = 0;
        link = playlist.find('a')[0];
      } else {
        link = playlist.find('a')[current];
      }
      run($(link), audio[0]);
    });
  }

  function run(link, player) {
    player.src = link.attr('href');
    par = link.parent();
    par.addClass('active').siblings().removeClass('active');
    audio[0].load();
    audio[0].play();
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="player">
  <ul id="playlist">
    <li><a href="audio/01.mp3">song 01</a></li>
    <li><a href="audio/02.mp3">song 02</a></li>
    <li><a href="audio/03.mp3">song 03</a></li>
    <li><a href="audio/04.mp3">song 04</a></li>
    <li><a href="audio/05.mp3">song 05</a></li>
    <li><a href="audio/06.mp3">song 06</a></li>
    <li><a href="audio/07.mp3">song 07</a></li>
    <li><a href="audio/08.mp3">song 08</a></li>
    <li><a href="audio/09.mp3">song 09</a></li>
    <li><a href="audio/10.mp3">song 10</a></li>
  </ul>
</div>
<audio id="audio" controls type="audio/mpeg">
            Sorry, your browser does not support HTML5 audio
        </audio>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...