H5的audio谁都会用, 照着官方api放个标签, play, stop...

实际运用中需要一些兼容性封装:

//audio
$.audio = function(params) {
var $audio = {};
$audio.methods = {
init: function() {
this.loop = params.loop || '';
this.id = params.id || '';
this.volume = params.volume || ;
this.mp3 = params.mp3 || '';
this.ogg = params.ogg || '';
var audioHtml = '<audio id="' + this.id + '" autoplay="autoplay" loop src="' + this.mp3 + '" preload="auto"></audio>';
$(".music").append(audioHtml);
},
play: function() {
document.getElementById(this.id).play();
},
stop: function() {
document.getElementById(this.id).pause();
},
soundVolume: function(value) {
document.getElementById(this.id).volume = value;
},
delAudio: function() {
$("#" + this.id).remove();
}
};
$audio.methods.init();
return $audio.methods;
};

调用的时候, 分为初始化,判断微信浏览器,

 audio = new $.audio({ id: "sound", mp3: "images/britax.mp3", loop: "loop" });
audio.play();
getWechatVersion();
if (getWechatVersion()) {
audio.stop();
$('.playon').show();
$('.playoff').hide();
}

以及事件的绑定:

$('.playon').click(function() {
audio.stop();
$('.playon').hide();
$('.playoff').show();
});
$('.playoff').click(function() {
audio.play();
$('.playon').show();
$('.playoff').hide();
});

样式略

最新文章

  1. c# System.Data.OracleClient需要Oracle客户端软件8.1.7或更高版本
  2. CSS3-实现单选框radio的小动画
  3. 创建空列表遇到的问题-RF
  4. WPF开发时光之痕日记本——终于完工了。。晒晒截图(三)(已上传安装包)
  5. xutils 框架
  6. eclipse+PyDev 中报错&quot;scrapy.spiders.Spider&quot; ,可用&quot;# @UndefinedVariable&quot;压制.
  7. Swift: 基本操作符
  8. C51 的重入问题 WARNING L15: MULTIPLE CALL TO SEGMENT
  9. 免解压版的Mysql的启动脚本,并且执行导入(windows)
  10. MVC4
  11. Spring security csrf实现前端纯html+ajax
  12. win10 uwp 按下等待按钮
  13. 浅谈JavaScript位操作符
  14. js赋值后,不影响源变量的方法。
  15. HTML和CSS初级前端面试题汇总(持续补充)
  16. 论一类每次修改log个结点更新的线段树标记方法
  17. Mac上svn报错解决方案
  18. JsonKey小写
  19. JVM的逃逸分析
  20. DDoS 攻击与防御:从原理到实践

热门文章

  1. Simple JavaScript Inheritance(John Resig)
  2. Agent是什么
  3. 【IE兼容性】background:transparent IE中Bug,不能选中input输入框,出现这个问题主要是IE8
  4. 利用velocity.js将svg动起来
  5. Unity3D在WebPlayer模式下的异常上报探索
  6. HDU4499 Cannon DFS 回溯的应用
  7. 【MyBatis学习03】原始dao开发方法及其弊端
  8. js常用工具
  9. Android Volley框架的几种post提交请求方式
  10. web 图片上传实现本地预览