[英]An audio player on a rotating CD in HTML5, CSS3 and/or JS
我正在寻找一种解决方案来让CD图像自行转动(就像这样: http : //alanschaffer.com/sound/images/cd.gif ),并且每当从该CD下的列表中选择一个轨道并单击时,将播放所选曲目。 在播放曲目时单击CD时,曲目将停止。
你能帮我吗?
PS:任何适用于iPad的解决方案建议都是适用的。 我将在iPad应用程序上使用它。
我建议使用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');
}
});
您无法控制图像的动画。 您需要每个图像的两个版本,一个是动画的,另一个不是。 点击后,您可以轻松地从一个图像更改为另一个图像。
例:
$('#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);
。
这是旋转图像的另一个例子。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.