Question

I’m looking for a solution to make a CD image turning around itself (just like this: http://alanschaffer.com/sound/images/cd.gif) and whenever a track is selected from a list under that CD and clicked, selected track will be played. When CD is clicked while track is being played, track will stop.

Can you help?

P.S: Any solution recommendation which will work on iPad is appriciated. I’m gonna use this on a iPad app.

Answer 1

I would recommend using css-animations for image-rotation (of course you have to add prefixes for other browsers):

.mycd.animate {
  -webkit-animation: infinite-spinning 1s infinite linear;
}

@-webkit-keyframes infinite-spinning {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

Just add the animate class to your image and the cd will spin.

$('.mycd').on('click',function() {
  if($(this).hasClass('animate')) {
    // Track is playing -> stop it
    $(this).removeClass('animate');
  } else {
    // Not Playing -> start
    $(this).addClass('animate');
  }
});