作者一碗稀饭
仿QQ语音播放效果,可以自动播放,读取语音播放长度,动画显示与播放长度关联,自动获取语音长度并播放
/** 语音 动画**/
@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;
}
}
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791