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