【HTML】如何在听歌时让图片转起来

某天在听歌的时候突然想到，歌曲的图片是怎么转起来的呢？应该是CSS3的animation属性，但具体怎么实现还是不知，于是一番研究下，有了以下的结果。

核心代码：
.rotate { animation: rotating 1.2s linear infinite; }
@keyframes rotating { from { transform: rotate(0) } to { transform: rotate(360deg) } }

整体实现：

<!DOCTYPE html>
<html>
<head>
  <style type="text/css">
    #audio_btn {
     30px;
    height: 30px;
    background-image: url(./music.png); /*这里是你本地图片的路径*/
    background-size: contain;
}

.rotate {
    -webkit-animation: rotating 1.2s linear infinite; //linear 匀速 infinite 循环
    -moz-animation: rotating 1.2s linear infinite;
    -o-animation: rotating 1.2s linear infinite;
    animation: rotating 1.2s linear infinite
}

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

@keyframes rotating {
    from { transform: rotate(0) }
    to { transform: rotate(360deg) }
}
@-moz-keyframes rotating {
    from { -moz-transform: rotate(0) }
    to { -moz-transform: rotate(360deg) }
}
  </style>
  <meta charset="utf-8">
  <title>animation</title>
</head>
<body>
  <div id="audio_btn">
    <audio loop autoplay src="http://music.163.com/song/media/outer/url?id=22815818.mp3" id="media">
      您的浏览器不支持 audio 标签。
    </audio>
  </div>
<script type="text/javascript">
  var x = document.getElementById("media"),
  btn = document.getElementById("audio_btn"); 
  
  btn.addEventListener('click', function(){
    this.classList.toggle("rotate");
    if(this.classList.contains("rotate"))
      x.play();
    else
      x.pause();
  })

</script>
</body>
</html>

遇到的问题：audio自动播放问题，浏览器会禁止自动播放，只有在有用户交互行为时才允许play，待解决