仿QQ语音播放效果加强版本【原创

来源:https://www.sucaihuo.com/js/2206.html 2017-06-20 22:05浏览(731) 收藏

作者一碗稀饭

仿QQ语音播放效果,可以自动播放,读取语音播放长度,动画显示与播放长度关联,自动获取语音长度并播放
仿QQ语音播放效果加强版本
分类:html5 > 音频 难易:入门级
查看演示 下载资源 下载积分: 50 积分
/** 语音 动画**/
  @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;
			}
		}
	}
标签: 音频语音
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/2206.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2