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

我正在寻找一个解决方案，使一张CD图像自转（就像这样：），每当从该CD下的列表中选择一个曲目并单击时，就会播放选定的曲目。播放曲目时单击CD时，曲目将停止

你能帮忙吗

---

附言：任何能在iPad上运行的解决方案建议都是值得推荐的。我将在iPad应用程序上使用它。

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

例如：

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

当然，在上面的代码示例中，如果之前的图像处于“动画”状态或未处于“动画”状态，则需要添加逻辑来替换给定给事实的正确图像

操作“音乐”有帮助。

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

只需将

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

您可能想使用

---

这是另一个例子。

嘿，旋转很好！非常感谢。现在我需要用它来触发它来播放mp4音频文件。你也能帮忙吗？@scaryguy在像iPad这样的移动设备上，它被限制通过JavaScript触发媒体元素的播放事件。您需要在用户上触发它-interaction@GNi33你所说的用户交互是什么意思？你能举个例子，告诉我一个方法吗？@scaryguy：这意味着只有用户在你的网站上做了一些事情，比如touchstart，…，你才能播放/加载媒体文件。。。但这应该没有问题，通过单击/触摸cd，您可以进行用户交互。所以只需启动声音：

$（'#myaudiotag'）.play（）检查：
$('.mycd').on('click',function() {
  if($(this).hasClass('animate')) {
    // Track is playing -> stop it
    $(this).removeClass('animate');
  } else {
    // Not Playing -> start
    $(this).addClass('animate');
  }
});