音乐播放器 audio

音乐播放器 audio

属性

  • src 音频的播放地址
  • controls 播放控件
  • autoplay 自动播放
  • loop 循环播放
  • muted 当设置修改属性后,音频输出被静音

APi

  • play 播放
  • pause 暂停
  • currentTime 设置或返回当前音频的长度
  • durations 返回音频长度
  • src 设置返回音频来源
  • volume 设置或获取音频的音量
  • muted 是否静音(静音返回true)
  • networkState 返回音频的当前网络状态

0 = NETWORK_EMPTY - 音频尚未初始化
1 = NETWORK_IDLE - 音频是活动的且已选取资源,但并未使用网络
2 = NETWORK_LOADING - 浏览器正在下载数据
3 = NETWORK_NO_SOURCE - 未找到音频来源

  • currentSrc 返回当前的URL
  • ended 返回音视频播放是否结束(结束为true)
  • loop 设置或获取当前音乐是否重新播放(获取的结果为Boolean)
  • playbackRate 设置或获取音频的播放速度(0.1~16)
  • readyState 返回当前就绪状态

0 = HAVE_NOTHING - 没有关于音频是否就绪的信息
1 = HAVE_METADATA - 关于音频就绪的元数据
2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的,但没有足够的数据来播放下一帧/毫秒
3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放

  • seeking 事件在用户开始移动/跳跃到新的音频/视频(audio/video)播放位置时触发
  • seeked 事件在用户已移动/跳跃到音频/视频(audio/video)中的新位置时触发。
  • olumechange 当音量更改时触发

使用

//这3个需要写函数audio.onseeking = function () {console.log(123)};audio.onseeked = function () {console.log(123)};audio.onvolumechange = function () {console.log(123)};
//除了这两个,其余的不用带括号
audio.play()
audio.pause()audio.currentTime 
audio.durations 
……

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/511144.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

云原生微服务技术趋势解读

简介:随着微服务技术门槛大幅下降,随着企业数字化升级步伐加速,随着云计算的迅速发展,微服务将无处不在;随着行业成熟度逐步提升,随着开源和标准推进,微服务的标准逐步形成,标准形成…

中国信通院魏博锴:云原生混部标准解读

嘉宾 | 魏博锴出品 | CSDN云原生2022年7月28日,中国信通院、腾讯云、FinOps产业标准工作组联合发起的《原动力x云原生正发声 降本增效大讲堂》系列直播活动第4讲如期举行,中国信通院云大所云计算部云原生研究员魏博锴解读了云原生混部标准。本文整理自魏…

从平凡到非凡 阿里云李克的技术进阶之路

简介:人物简介:李克 阿里云边缘云计算领域技术负责人 2009年硕士毕业加入阿里至今,一直从事CDN及边缘云领域的技术研发工作,在CDN、边缘计算等方向上有丰富的行业经验,全程参与了阿里云CDN商业化转型,边缘云…

详解Object.defineProperty

Object.defineProperty 3个参数 obj: 可以理解为目标对象。prop: 目标对象的属性名。descriptor: 对属性的描述。 descriptor可分为数据属性和访问器属性两类 //4个数据描述符value,configurable,enumerable,writablelet obj {};Object.de…

一文搞懂redis

简介:NoSQL泛指非关系型数据库,随着web2.0互联网的诞生,传统的关系型数据库很难对付web2.0大数据时代!尤其是超大规模的高并发的社区,暴露出来很多难以克服的问题,NoSQL在当今大数据环境下发展的十分迅速&a…

热搜!华为 30 岁以下员工仅占 28%,网友:35 岁危机呢?

整理 | 郑丽媛出品 | CSDN(ID:CSDNnews)一直以来,程序员的“35 岁”都是圈内的热议话题:35 岁是程序员的职业终结点、程序员到 35 岁就废了、超过 35 岁的程序员容易被裁……久而久之,35 岁逐渐变成了一个很…

阿里云发布业界首本《云计算公网质量白皮书》

随着互联网的发展,网络已经融入了整个社会发展的进程,如同血液贯通人类文明的五脏六腑。一旦网络出现故障,将给社会的政治、经济、文化造成重大损失。 2021年10月4日,Facebook在地球上”消失”了6小时,市值跌掉3000亿…

初识vue3

对vue3的理解 2020年9月发布的正式版vue3支持大多数的Vue2的特性Vue中设计了一套强大的组合APi代替了Vue2中的option API,复用性更强了更好的支持TS最主要:Vue3中使用了Proxy配合Reflect代替了Vue2中Object.defineProperty()方法实现数据的响应式&#…

选轻量应用服务器or云服务器ECS?一图帮你彻底区分

简介:轻量应用服务器适合轻量级且访问量低的应用场景,更适合个人开发者、对新手小白更友好;而云服务器ECS可覆盖全业务场景(如大数据分析,深度学习等),要求用户有一定的开发技术能力。 本文首发…

js实现shallowReactive和reactive

// shallowReactive(浅的监视,浅的劫持,浅的响应式数据)与reactive(深的)// 定义一个reactiveHandler处理对象 let reactiveHandler {// 获取属性值get(target, prop) {// 这里的result返回1const result Reflect.get(target, p…

宜搭小技巧|一招摆脱纸质表单,数据收集更便捷

简介:开启「应用公开访问」,组织外成员也可提交数据。 许多公司在前台都会准备一个访客登记表,供来访者填写。但如果来访者数量较多,就会出现这样的问题…… 提供纸质表单供访客填写信息,使用起来繁琐且费时&#xff…

如何用 Serverless 低成本打造个人专属网盘?

简介:想要做个网盘不知如何开始,不妨花3分钟读读这篇,看看如何借助 Serverless ,低成本的做一个“不限制网速、无限扩展、同时支持数百种文件格式在线预览、编辑、协作”的专属个人 & 家庭网盘~ 前言 随着全球大数据不断增长…

云之后,亚马逊云科技要为业界提供水和空气一样的安全防护

云巨头亚马逊云科技,正在持续加码云安全。 编辑 | 宋慧 出品 | CSDN云计算 提到亚马逊云科技,我们首先想到的是它在云领域的计算存储等技术和优势。不过亚马逊云科技却连续四年在举办它的全球安全大会 re:Inforce,刚刚 ,2022 re:…

即学即会 Serverless | 如何解决 Serverless 应用开发部署的难题?

简介:开发者在选择使用 Serverless 时,仍会有开发和部署困难、厂商锁定等诸多担忧,有没有一种支持 Serverless 应用全生命周期管理的开发者工具,能够简单快速上手并真正帮助我们提升研发、运维的效能的呢? 破局&#x…

NBF事件中心架构设计与实现

简介:NBF是阿里巴巴供应链中台的基础技术团队打造的一个技术PaaS平台,她提供了微服务FaaS框架,低代码平台和中台基础设施等一系列的PaaS产品,旨在帮助业务伙伴快速复用和扩展中台能力,提升研发效能和对外的商业化输出。…

常用的git指令

命令行常用命令(在git bash上生效,部分在cmd无用) pwd (print working directory) 查看当前所在路径–绝对路径cd(change directory) 切换目标ls(list) 查看当前目录下的内容mkdir(make directory) 创建目录touch 创建文件cat 查看文件内容&…

关于“算力”,这篇文章值得一看

作者 | 小枣君来源 | 鲜枣课堂今天这篇文章,我们来聊聊算力。这两年,算力可以说是ICT行业的一个热门概念。在新闻报道和大咖演讲中,总会出现它的身影。那么,究竟到底什么是算力?算力包括哪些类别,分别有什么…

宜搭小技巧|找不到应用怎么办?群应用一键直达

简介:5步学会「一键添加群应用」! 上期钉多多将Excel一键转应用后,大大提高了同学们的工作效率,于是小伙伴们纷纷用钉钉宜搭创建了各种各样的应用,那么新的问题产生了...... 每次提交数据都要切换到工作台找到对应的…

前端实现多文件编译器

简介:在前端工程中,有时我们需要在浏览器编译并执行一些代码,这种需求常见于低代码场景中。例如我们在搭建时需自定义一部分代码,这些代码需要在渲染时执行。为了方便起见,我们写的代码一定是 ES6 语法,如果…

3个月夯实基建,鲜丰水果这样实现研发数字化

简介:3个月夯实基建,鲜丰水果这样实现研发数字化。简单、快速地提升产研团队的交付质量和交付效率,成为了支持组织业务创新的必选项。让我们一起看看鲜丰究竟如何逐步破局。 鲜丰水果,创始于1997年,历经25年发展史的鲜…