作者一碗稀饭

/** 语音 动画**/
  @keyframes run {
     0% {
       background-position: -6px 0;
     }
     25% {
       background-position: -52px 0; 
     }
     50% {
       background-position: -98px 0;
     }
     75% {
		background-position: -144px 0;
     }
     100% {
       background-position: -190px 0;
     }

   }
  @-webkit-keyframes run {
     0% {
       background-position: -6px 0;
     }
     33.33% {
       background-position: -52px 0; 
     }
     66.66% {
       background-position: -98px 0;
     }
     100% {
       background-position: -144px 0;
     }

  }
  #sprite {
    width: 46px;
    height: 49px;
    background: url("yuyin.png") -7px 0 no-repeat;


  }
  #yuyin{
  width:180px;
  height:49px;
  float:left;
  }

window.onload=function(){
		var audioDom=document.getElementById("audio");
		var boxDom=document.getElementById("box");
		var spanDom_one=boxDom.getElementsByTagName("span")[0];
		var yuyin_long=parseFloat(audioDom.duration).toFixed(2)
		setTimeout(function(){spanDom_one.innerHTML=parseFloat(audioDom.duration).toFixed(2)+"~";},500);
		boxDom.onclick=function(){
			if(audioDom.paused){
				audioDom.play();
				    setTimeout(function() {
						document.getElementById('sprite').style.animation="run 1s steps(1, end) "+parseFloat(audioDom.duration).toFixed(2);
					}, 10);	
					document.getElementById('sprite').style.animation="";
			}else{
				audioDom.pause();
				//初始化音频文件
				audioDom.currentTime = 0;
			}
		}
	}