href '#'?Попытка сделать аудио контроль - PullRequest
0 голосов
/ 23 сентября 2018

var tracklist = [{
    src: 'https://primi.gg/assets/audio/gucci.mp3',
    cover: 'https://i.imgur.com/Vayupax.jpg'
  },
  {
    src: 'https://primi.gg/assets/audio/anarchyacres.mp3',
    cover: 'https://i.imgur.com/Vayupax.jpg'
  },
  {
    src: 'https://primi.gg/assets/audio/sempiternal.mp3',
    cover: 'https://i.imgur.com/Vayupax.jpg'
  },
  {
    src: 'https://primi.gg/assets/audio/wither.mp3',
    cover: 'https://i.imgur.com/Vayupax.jpg'
  },
  {
    src: 'https://primi.gg/assets/audio/enemy.mp3',
    cover: 'https://i.imgur.com/Vayupax.jpg'
  },
  {
    src: 'https://primi.gg/assets/audio/antisocial.mp3',
    cover: 'https://i.imgur.com/Vayupax.jpg'
  },
];

var player = false;
var track = 1;
var lastTrack = -1;

var play = function() {
  if (lastTrack != track) {
    player.src = tracklist[track - 1].src;
  }

  lastTrack = track;

  if (player.paused) {
    player.play();
  }
};

$(document).ready(function() {
  player = document.createElement('audio');

  $('a.player-control').click(function(event) {
    event.preventDefault();
  });

  $('#play').click(function() {
    play();
  });

  $('#pause').click(function() {
    if (!player.paused) {
      player.pause();
    }
  });

  $('#next').click(function() {
    track++;

    if (track > tracklist.length) {
      track = 1;
    }

    play();
  });

  $('#prev').click(function() {
    track--;

    if (track < 1) {
      track = tracklist.length;
    }

    play();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="prev" class="player-control">prev</a>
<a href="#" id="play" class="player-control">play</a>
<a href="#" id="pause" class="player-control">pause</a>
<a href="#" id="next" class="player-control">forward</a>

Я в основном пытаюсь создать собственный аудио-элемент управления css и html, но расставлю все по местам, это не работает.Я думаю, что это как-то связано с конкретной частью кода "href = '#' ... Я совершенно новичок в кодировании, поэтому любая помощь и указатели были бы хорошими! Вот весь код и спасибо заранее!

JS

1 Ответ

0 голосов
/ 23 сентября 2018

Ваш javascript-код сохраняется в виде файла .css, вам нужно сохранить его как .js и импортировать его в свой HTML-файл, используя теги <script></script>.Вам также нужно будет использовать библиотеку jquery.Поместите это в раздел заголовка перед вашим сценарием, например

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https:/yourscript.js"></script>

Удачи

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...