最新消息:欢迎加入小松的QQ群一起讨论一起学习,搜索页面修改成lua+ElasticSearch,使用php这个页面速度相对慢一点,优化之后速度杠杠的,如有问题请加群联系我

怎么判断mp3/音频文件加载完成

前端技术 1067浏览 0评论

怎么判断mp3/音频文件加载完成

怎么判断MP3或音频文件加载完成,我要处理的功能是,当加载完成MP3音乐文件就显示开关按钮。因为如果音乐文件没有载入成功就显示,开关按钮,当用户点击的时候就不会器作用,对用户体验不好,于是上万能的百度找解决方法
我最早的方法导入音乐

<audio id="audio_play" src="490141.m4a" autoplay="autoplay" loop="loop" ></audio>

但是没有办法判断出是否载入完成了
百度里找了半天,显示的结果都不是我想要的,只能上google,国内怎么上goolge请看下面的文章
不用翻墙软件也可以访问google
我的搬瓦工vps vpn免费测试账号

google的算法果然比百度先进,搜出来的结果是我想要的,现在把解决方法写下来,这个是我单独写的demo,测试下面的代码请修改
1、加载jquery
2、audio.src = “490141.m4a”; 修改成 自己的音频文件
3、修改background-image: url(img/sprite_icon.png); 按钮图片

<script src="jquery-1.8.2.min.js"></script>
<script>
var audio = document.createElement("audio");
audio.src = "490141.m4a";
audio.addEventListener("canplaythrough",
function() {
  $(".yinyu").show();
  audio.play();
},
false);
audio.load();
function audioplay(){
  if(audio.paused){
    audio.play();
  }else{
    audio.pause();
  }
}
</script>
<style>
.m-toggle {
 background-image: url(img/sprite_icon.png);
 -webkit-background-size: 35px auto;
 -moz-background-size: 35px auto;
 -o-background-size: 35px auto;
 background-size: 35px auto;
 background-repeat: no-repeat;
 position: absolute;
 right: 10px;
 top: 50px;
 width: 28px;
 height: 28px;
 display:none;
}
</style>
<div class="m-toggle yinyu" onClick="audioplay()"></div>

上面的代码如果有问题请留言

QQ交流群:136351212(满) 455721967

如无特别说明,本站文章皆为原创,若要转载,务必请注明以下原文信息:
转载保留版权:小松博客» 怎么判断mp3/音频文件加载完成
本文链接地址:https://www.phpsong.com/1445.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
木有头像就木有JJ!点这里按步骤申请Gravatar头像吧!

网友最新评论 (1)

加载中,请稍候...
  1. 常来学习学习,吸收些有用的营养,感谢博主的分享。
    官方博客2015-10-22 17:58:51回复