An audio player on a rotating CD in HTML5, CSS3 and/or JS

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.

score 3 · Accepted Answer · edited Sep 04 '12 at 10:10

3

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');
  }
});

edited Sep 04 '12 at 10:10

GNi33

4,459
2
31
44

answered Sep 04 '12 at 09:18

thpnk

616
1
5
9

Hey rotating works great! Thank you! Now I need to use it to trigger it to play a mp4 audio file. Can you help on this too? – scaryguy Sep 04 '12 at 10:14
@scaryguy on mobile devices like the iPad, it's restricted to trigger the play-event of media-elements through JavaScript. You'll need to trigger it on user-interaction – GNi33 Sep 04 '12 at 11:00
@GNi33 what do you mean by user-interaction? Could you give an example and show me a way to make it? – scaryguy Sep 04 '12 at 11:19
@scaryguy: That means you can play/load mediafiles only if user does something on your site, like touchstart, ... But that should be no problem, you have a userinteraction by clicking/touching on the cd. So just start the sound: `$('#myaudiotag').play();` Check: https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video – thpnk Sep 04 '12 at 12:51

score 0 · Answer 2 · edited May 23 '17 at 10:34

You can't control the animation of the images. You would need two versions of each image, one that is animated, and one that's not. On click you can easily change from one image to another.

Example:

$('#imgId').on("click", function(){
    var src = $(this).attr('src');  
    $(this).attr('src', src.replace('.gif', '_anim.gif'));    

    //logic for stopping and playing music - see link below
});

Of course, in the upper code example you will need to add the logic for replacing the correct image given to the fact if the image before was in "animated" state or not.

For manipulating "music" see if this link on SO helps.

score 0 · Answer 3 · answered Sep 04 '12 at 09:18

0

You might want to use transform: rotate(xdg);.

Here is another example rotating an image.

answered Sep 04 '12 at 09:18

Amir Abu Shareb

164
10

An audio player on a rotating CD in HTML5, CSS3 and/or JS

3 Answers3