HTML5，CSS3和/或JS中旋轉CD上的音頻播放器

Question

我正在尋找一種解決方案來讓CD圖像自行轉動（就像這樣： http ： //alanschaffer.com/sound/images/cd.gif ），並且每當從該CD下的列表中選擇一個軌道並單擊時，將播放所選曲目。 在播放曲目時單擊CD時，曲目將停止。

你能幫我嗎？

PS：任何適用於iPad的解決方案建議都是適用的。 我將在iPad應用程序上使用它。

Answer 1

我建議使用css-animations進行圖像旋轉（當然你必須為其他瀏覽器添加前綴）：

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

Answer 2

您無法控制圖像的動畫。 您需要每個圖像的兩個版本，一個是動畫的，另一個不是。 點擊后，您可以輕松地從一個圖像更改為另一個圖像。

例：

$('#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上的這個鏈接是否有幫助。

Answer 3

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

這是旋轉圖像的另一個例子。