• 售前

  • 售后

热门帖子
入门百科

Html5 audio标签样式的修改

[复制链接]
六月清晨搅 显示全部楼层 发表于 2021-10-26 14:02:35 |阅读模式 打印 上一主题 下一主题
先给各人介绍下HTML5中的新元素标签
src:音频文件路径。
autobuffer:设置是否在页面加载时自动缓冲音频。
autoplay:设置音频是否自动播放。
loop:设置音频是否要循环播放。
controls:属性供添加播放、暂停和音量控件。
由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/制止效果,但差别的浏览器上的audio样式却不尽人意,以是我简单的把它进行了封装,效果如下:


作为技术实现,它的原理比力简单,就是把原生的audio隐蔽,然后用div来表现播放器的效果,然后调用它的click事件来触发play和stop,然后是时长duration,这个值偶尔可以或许获取,偶尔不可,比力坑,以是发起在audio标签上自界说duration属性存放时长,这时,如果组件获取不到时会来取这个值。

复制代码代码如下:
this.settings.target.on('loadedmetadata', function() {
_this.duration = _this.audio.duration;
if (_this.duration != "Infinity") {
_this.durationContent.html(Math.floor(_this.duration) + 's');
} else {
var attr = $(_this.settings.target).attr('duration');
if(attr){
_this.durationContent.html($(_this.settings.target).attr('duration')+"s");
}else{
_this.durationContent.html('');
}
}
});

以上内容给各人介绍了Html5 audio标签样式的修改 ,盼望对各人有所帮助。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作