两种情况:1.页面一开始就已经加载了音频,2.点击的时候为audio动态的更改音频路径,播放不同的音频现象:第一种时长正常,第二种时长audio.duration为nan
分析:第一种情况,获取时长时,已经加载了音频,点击时可以获取音频时长;第二种,点击的时候,音频没有加载(虽然已经开始播放),获取不到时长。
解决方法:audio.addEventListener("canplay", function(){
sc=parseInt(audio.duration);
});监听是否准备好音频,将需要的属性放进去(如:时长),此方法会一直监听,不建议进行其他js操作
- <audio id="audio" src="" ></audio>
第一种:
- 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浏览器中,时长获取不正常
来自 http://blog.csdn.net/qq_21119773/article/details/52175698