欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

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

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

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

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

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

 

[html] view plain copy
 
  1. <audio id="audio" src="" ></audio><!-- controls="controls" -->  


 

第一种:

[javascript] view plain copy
 
  1. var sc=60;//时长  
  2.         var js=null;  
  3.         var audio=document.getElementById("audio");  
  4.         $("#shuohua").click(function(){   
  5.             var y_src=audio.src;  
  6.             var p=$(this).attr("data-p");  
  7.             if(p==1){  
  8.                 if(y_src.indexOf(".mp3")>0){  
  9.                     $(this).attr("src","voice1.png");  
  10.                     audio.play();  
  11.                     sc=parseInt(audio.duration);  
  12.                     $("#shichang").text(sc);  
  13.                     js=setInterval("jianshao_shichang()",1000);  
  14.                 }$(this).attr("data-p","0");  
  15.             }else{  
  16.                 if(y_src.indexOf(".mp3")>0)audio.pause();  
  17.                 $(this).attr("data-p","1");  
  18.                 clearInterval(js);  
  19.                 audio.load();  
  20.                    
  21.             }  
  22.               
  23.         });  
  24.         function jianshao_shichang(){  
  25.             sc--;  
  26.             $("#shichang").text(sc);  
  27.             if(sc<0){  
  28.                 clearInterval(js);  
  29.                 audio.load();  
  30.                    
  31.             }  
  32.         }  
第二种

 

 

 

[javascript] view plain copy
 
  1. //音频播放----  
  2.         var sc=60;//时长  
  3.         var js=null;  
  4.         var id="";  
  5.         var audio=document.getElementById("audio");  
  6.         $(".question").on("click",".shuohua",function(e){  
  7.             if(js!=null){  
  8.                 clearInterval(js);  
  9.                 var all=$(".shuohua");  
  10.                 for(var i=0;i<all.length;i++){  
  11.                     var t_id=$(all[i]).attr("data-id");  
  12.                     $("#vimg_"+t_id).attr("src","voice.png");  
  13.                     $("#sc_"+t_id).text("");  
  14.                     $("#vimg_"+t_id).attr("data-p","1");  
  15.                 }  
  16.             }  
  17.             id=$(e.target).attr("data-id");  
  18.             var datap=$("#vimg_"+id).attr("data-p");  
  19.             var voice=$("#vimg_"+id).attr("data-voice");  
  20.             voice="http://192.168.1.104/amrPlayer-jsdemo/1.mp3";  
  21.             audio.src=voice;  
  22.             if(datap==1){  
  23.                 if(voice.indexOf(".mp3")>0){  
  24.                     audio.play();  
  25.                     $("#vimg_"+id).attr("src","voice1.png");  
  26.                     js=setInterval("jianshao_shichang()",1000);  
  27.                     audio.addEventListener("canplay"function(){  
  28.                         sc=parseInt(audio.duration);  
  29.                     });  
  30.                 }$("#vimg_"+id).attr("data-p","0");  
  31.             }else{alert(datap);  
  32.                 audio.pause();  
  33.                 clearInterval(js);  
  34.                 audio.load();  
  35.                 $("#vimg_"+id).attr("src","voice.png");  
  36.                 $("#sc_"+id).text("");  
  37.                 $("#vimg_"+id).attr("data-p","1");  
  38.             }  
  39.         });  
  40.         function jianshao_shichang(){  
  41.             sc--;  
  42.             $("#sc_"+id).text(sc);  
  43.             if(sc<0){  
  44.                 clearInterval(js);  
  45.                 audio.load();  
  46.                 $("#vimg_"+id).attr("src","voice.png");  
  47.                 $("#sc_"+id).text("");  
  48.                 $("#vimg_"+id).attr("data-p","1");  
  49.             }  
  50.         }  

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

来自 
http://blog.csdn.net/qq_21119773/article/details/52175698
普通分类: