audio获取时长,注意事项,计时器

两种情况:1.页面一开始就已经加载了音频,2.点击的时候为audio动态的更改音频路径,播放不同的音频

现象:第一种时长正常,第二种时长audio.duration为nan

分析:第一种情况,获取时长时,已经加载了音频,点击时可以获取音频时长;第二种,点击的时候,音频没有加载(虽然已经开始播放),获取不到时长。

解决方法:audio.addEventListener("canplay", function(){
sc=parseInt(audio.duration);
});监听是否准备好音频,将需要的属性放进去(如:时长),此方法会一直监听,不建议进行其他js操作

<audio id="audio" src="" ></audio><!-- controls="controls" -->


第一种:

var sc=60;//时长
		var js=null;
		var audio=document.getElementById("audio");
		$("#shuohua").click(function(){	
			var y_src=audio.src;
			var p=$(this).attr("data-p");
			if(p==1){
				if(y_src.indexOf(".mp3")>0){
					$(this).attr("src","voice1.png");
					audio.play();
					sc=parseInt(audio.duration);
					$("#shichang").text(sc);
					js=setInterval("jianshao_shichang()",1000);
				}$(this).attr("data-p","0");
			}else{
				if(y_src.indexOf(".mp3")>0)audio.pause();
				$(this).attr("data-p","1");
				clearInterval(js);
				audio.load();
				 
			}
			
		});
		function jianshao_shichang(){
			sc--;
			$("#shichang").text(sc);
			if(sc<0){
				clearInterval(js);
				audio.load();
				 
			}
		}
第二种


//音频播放----
		var sc=60;//时长
		var js=null;
		var id="";
		var audio=document.getElementById("audio");
		$(".question").on("click",".shuohua",function(e){
			if(js!=null){
				clearInterval(js);
				var all=$(".shuohua");
				for(var i=0;i<all.length;i++){
					var t_id=$(all[i]).attr("data-id");
					$("#vimg_"+t_id).attr("src","voice.png");
					$("#sc_"+t_id).text("");
					$("#vimg_"+t_id).attr("data-p","1");
				}
			}
			id=$(e.target).attr("data-id");
			var datap=$("#vimg_"+id).attr("data-p");
			var voice=$("#vimg_"+id).attr("data-voice");
			voice="http://192.168.1.104/amrPlayer-jsdemo/1.mp3";
			audio.src=voice;
			if(datap==1){
				if(voice.indexOf(".mp3")>0){
					audio.play();
					$("#vimg_"+id).attr("src","voice1.png");
					js=setInterval("jianshao_shichang()",1000);
					audio.addEventListener("canplay", function(){
						sc=parseInt(audio.duration);
					});
				}$("#vimg_"+id).attr("data-p","0");
			}else{alert(datap);
				audio.pause();
				clearInterval(js);
				audio.load();
				$("#vimg_"+id).attr("src","voice.png");
				$("#sc_"+id).text("");
				$("#vimg_"+id).attr("data-p","1");
			}
		});
		function jianshao_shichang(){
			sc--;
			$("#sc_"+id).text(sc);
			if(sc<0){
				clearInterval(js);
				audio.load();
				$("#vimg_"+id).attr("src","voice.png");
				$("#sc_"+id).text("");
				$("#vimg_"+id).attr("data-p","1");
			}
		}

兼容,在安卓和window中时长正常,在ios浏览器中,时长获取不正常

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值