@keyframes music {
0% {
transform: rotate(0deg);
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Safari and Chrome */
}
100% {
transform: rotate(360deg);
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Safari and Chrome */
}
}
.music_tool{
animation-name:music;
animation-duration:3s; //The time it takes to execute an animation
-webkit-animation-name:music;
-webkit-animation-duration:3s;
animation-iteration-count:infinite; //Number of animation executions
-webkit-animation-iteration-count:infinite;
animation-timing-function:linear; //animation effect curve
-webkit-animation-timing-function:linear; /* Safari and Chrome */
}
// document.getElementById("music-tool").classList.add('music_tool'); //添加动画
// document.getElementById("music-tool").classList.remove('music_tool'); //移除动画
document.getElementById("music-tool").style.animationPlayState = "running"; //Set the animation state
document.getElementById("music-tool").style.WebkitAnimationPlayState = "running"; // code for Chrome and Safari
document.getElementById("music-tool").style.animationPlayState = "paused"; //Set the animation state
document.getElementById("music-tool").style.WebkitAnimationPlayState = "paused"; // code for Chrome and Safari
jquery:
$('xxx').stop() or $('xxx').stop().animate();
or
$(this).css({
"animation-play-state":"paused"
})
// autoplay autoplay loop loop play preload then the audio is loaded when the page loads and ready to play.
controls
If present, displays controls, such as a play button, to the user.
<audio id="music" autoplay loop preload="auto">
<source src="music.mp3" >
</audio>
//Detect if playback has been paused.audio.paused returns false when the player is playing.
// alert(audio.paused);
//audio duration s
// alert(audio.duration);
audio.play();//audio.play();// This is playback
audio.pause();// This is the pause