css3动画和音频

@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; //执行一次动画需要的时间

-webkit-animation-name:music;

-webkit-animation-duration:3s;

animation-iteration-count:infinite; //动画执行次数

-webkit-animation-iteration-count:infinite;

animation-timing-function:linear; //动画效果曲线

-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"; //设置动画状态

document.getElementById("music-tool").style.WebkitAnimationPlayState = "running"; // 针对 Chrome 和 Safari 的代

document.getElementById("music-tool").style.animationPlayState = "paused"; //设置动画状态

document.getElementById("music-tool").style.WebkitAnimationPlayState = "paused"; // 针对 Chrome 和 Safari 的代

jquery:

$('xxx').stop() 或者 $('xxx').stop().animate();

或者

$(this).css({
 "animation-play-state":"paused"
})

// autoplay 自动播放 loop 循环播放 preload 则音频在页面加载时进行加载，并预备播放。controls 如果出现该属性，则向用户显示控件，比如播放按钮。

<audio >

<source src="music.mp3" >

</audio>

//检测播放是否已暂停.audio.paused 在播放器播放时返回false.

// alert(audio.paused);

//音频时长 s

// alert(audio.duration);

audio.play();//audio.play();// 这个就是播放

audio.pause();// 这个就是暂停

   var audio=document.getElementById("audio");
    audio.duration//播放时间
    audio.currentTime//播放进度

audio.ontimeupdate=function(){}//播放时间更新事件