audio获取时长,注意事项,计时器
2016-08-10 20:05
113 查看
两种情况:1.页面一开始就已经加载了音频,2.点击的时候为audio动态的更改音频路径,播放不同的音频
现象:第一种时长正常,第二种时长audio.duration为nan
分析:第一种情况,获取时长时,已经加载了音频,点击时可以获取音频时长;第二种,点击的时候,音频没有加载(虽然已经开始播放),获取不到时长。
解决方法:audio.addEventListener("canplay", function(){
sc=parseInt(audio.duration);
});监听是否准备好音频,将需要的属性放进去(如:时长),此方法会一直监听,不建议进行其他js操作
第一种:
兼容,在安卓和window中时长正常,在ios浏览器中,时长获取不正常
现象:第一种时长正常,第二种时长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浏览器中,时长获取不正常
相关文章推荐
- HTML DOCTYPE属性对JS获取窗口宽度和高度注意事项
- Delphi中获取Unix时间戳及注意事项
- 移动端audio使用的一个注意事项
- 使用CTSettingCopyMyPhoneNumber()函数获取电话号码的注意事项
- jQuery中获取checkbox选中项等操作及注意事项
- 获取系统Temp,以及其注意事项。
- #小练习 使用HTMLParser获取data时注意事项 分类: python 小练习 HTMLParser 2013-11-08 21:05 335人阅读 评论(0) 收藏
- CHtmlView获取页面的Document注意事项
- 关于JS获取各种尺寸的注意事项
- Perl 脚本中使用ls 获取目录名或文件名注意事项
- Android通过http方式获取JSON字符串并解析的注意事项(乱码,小黑框)
- Windows下获取高精度时间注意事项 [转贴 AdamWu]
- [开发笔记]-jQuery获取checkbox选中项等操作及注意事项
- android中获取屏幕高宽时的注意事项
- 获取xml文件时的注意事项
- SolidWorks异步模式开发,使用COM接口获取Array数据时的注意事项
- 关于数据库中varchar/nvarchar类型数据的获取注意事项
- xmlDoc.SelectNodes用法(获取不到节点时注意事项)
- 使用ftok获取ipc的key值的一点注意事项
- #小练习 使用HTMLParser获取data时注意事项