href '#'? Trying to make audio controls

Question

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>

I'm basically trying to make a custom audio control with css and html, but put everything in place it doesn't work. I think it has something to do with the specific part of code "href='#'... I'm entirely new to coding so any help and pointers would be nice! Here is the entire code and thank you in advance!

The JS

score 0 · Accepted Answer · answered Sep 23 '18 at 13:35

0

Your javascript code is saved as a .css file, you need to save it as .js and import it into your html using <script></script> tags. You will also need to use the jquery library. Place this in the head section before your script, e.g.

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

Best of luck

answered Sep 23 '18 at 13:35

Rachel Gallen

27,943
21
72
81

Oh my god, I thought it was css. My mistake, but I had one more question. What would I need to do to make it autoplay once the page is loaded? Thank you again so much! :) – primi Sep 23 '18 at 13:45
@primi 1) you seem to have a number of files, it would depend on which one you want to autoplay. 2) autoplay is not recommended. – Rachel Gallen Sep 23 '18 at 13:48
I accepted your answer and I would like it in order on how the songs are in the code and the list also stops after one is played through, how would I fix that as well, but why would it not be recommended? – primi Sep 23 '18 at 13:51
@primi well, it's not recommended from a user experience point of view, it can be irritating for a user to open a page and for the audio to immediately play.. – Rachel Gallen Sep 23 '18 at 13:58
in terms of playing next if a song ends, I wouldn't see that as problem, I just wouldn't start it on open (which is what I interpret "autoplay" to mean.. I always turn off autoplay on YT for example.. – Rachel Gallen Sep 23 '18 at 14:02
https://stackoverflow.com/questions/27363891/javascript-play-audio-one-after-another-html5 or https://stackoverflow.com/questions/46702074/play-next-html5-audio-when-one-above-it-finishes these questions deal with playing with one after the other – Rachel Gallen Sep 23 '18 at 14:04

href '#'? Trying to make audio controls

1 Answers1