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 id="music" autoplay loop preload="auto">   

<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.οntimeupdate=function(){}//播放时间更新事件

转载于:https://www.cnblogs.com/BlingSun/p/8949494.html