HTML5、CSS3和/或JS中旋转CD上的音频播放器

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

本文关键字：CD 旋转 播放器 音频 JS CSS3 HTML5      更新时间：2023-09-26

我正在寻找一种解决方案，使CD映像能够自行翻转（如下所示：http://alanschaffer.com/sound/images/cd.gif)并且每当从该CD下的列表中选择曲目并点击时，所选曲目将被播放。在播放曲目时单击CD时，曲目将停止。

你能帮忙吗？

附言：任何适用于iPad的解决方案建议都会被告知。我要在iPad应用程序上使用这个。

我建议使用css动画进行图像旋转（当然，您必须为其他浏览器添加前缀）：

.mycd.animate {
  -webkit-animation: infinite-spinning 1s infinite linear;
}
@-webkit-keyframes infinite-spinning {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

只需将animate类添加到图像中，cd就会旋转。

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

您无法控制图像的动画。每个图像需要两个版本，一个是动画的，另一个不是。单击即可轻松地从一个图像更改为另一个图像。

示例：

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

当然，在上面的代码示例中，如果之前的图像是否处于"动画"状态，则需要添加用于替换给定事实的正确图像的逻辑。

对于操纵"音乐"，请查看SO上的此链接是否有帮助。

您可能想要使用transform: rotate(xdg);。

这里是旋转图像的另一个示例。

相关文章：