html5中音乐播放器怎么写,打造属于自己的音乐播放器 HTML5之audio标签
我的音乐播放器
HTML5中增加了Audio和Video标签,这两个标签的用法非常相似。功能却是相当强大,我们先来看一下Audio标签各个浏览器的支持情况。这里用的依然是Can I Use这个在线网站,相信学习前端的同学应该都不陌生。
Can I Use
我们可以看到,各大浏览器对这个元素的支持是非常给力的,除了IE8以前的和Opera Mini,所以just do it。
相关文档:Audio MDN Audio 菜鸟教程
对于这个元素怎么使用,个人感觉没有什么好讲解的,都是一目了然。我就讲解一下Audio的一些属性,方法,事件会在什么时候用到。
1 方法
play() 播放这就不用说了 会设置puased属性为false
pause(), 暂停这也不用说了 会设置puased属性为true
load() 重新加载
fastSeek 设置播放时间 fastSeek(30) 设置从30s处播放,可以用来快进,但是这个方法谷歌不支持,狐火下可以,所以最好还是通过设置currentTime来实现。
canPlayType() 检查浏览器是否可以播放指定的音频类型 如果想做的完美一点是可以的,但是一般常见的音乐类型,浏览器都会支持。
2 属性
属性(上)
属性(下)
常用的属性及其方法我已经在上面进行了标注。在播放音乐之前一定要先加载音乐,也就是设置audio.src属性。paused属性在播放是会设置为false 暂停时设置为true。
由于属性事件太多,于是采用了这种截图标注的方式,还望大家见谅。
3 事件:
事件(上)
事件(下)
注意:
当音频/视频处于加载过程中时,会依次发生以下事件:
loadstart
durationchange
loadedmetadata
loadeddata
progress
canplay
canplaythrough
这个标签的用法其实很简单,完成播放器的难点就是逻辑控制,思路的清晰,所以在写代码之前一定要画流程图。在这里我推荐一款在线的框图设计网站,不加评论,因为目前自己只用过这一个:https://www.processon.com 当然还可以画思维脑图等等其他的。
可能你在写播放器的图中会用到下面的一些问题:
问题1
问题2
我碰到问题2的原因是,音乐没有加载(没有设置audio.src)就直接 audio.play() 此时不会报错 ,但是点击关闭按钮即执行 audio.pause()时,就会报这个错。底下为产生相同错误的测试代码(当然这只是一个例子,可能出现的情况有多种)
我的音乐播放器
关闭
var dom=document.getElementById("audioDom");
dom.play();
function test(){
dom.pause();
}
总结一点 就是如果产生类似问题,一定是你的播放逻辑产生了问题。
这是我个人播放器的github地址:音乐播放器 目前还没有怎么整理优化,只是功能有了,金玉其外,败絮其中了。
最后告诫大家一点,写代码一定要备份,一定要学会用git来管理自己的项目。这次本来有一个小bug,我想小bug改起来应该容易,不用备份,结果越改坑越大最后改的面目全非,一片混乱,一气之下又来一遍,每一次改动都会commit。
html5中音乐播放器怎么写,打造属于自己的音乐播放器 HTML5之audio标签相关推荐
- html5中div怎么横着写,html5:div 横向排列的方法
div 横向排列的方法. 以下面这组 div 为例,wrap 的高度由内容撑开 div1 div2 div3 平时是这样的,上下排列~ float 浮动 #div1{ float: left; } # ...
- HTML5中新增的音频标签是,HTML5新增的音频标签、视频标签
我们所说的H5就是我们所说的HTML5中新增的语言标准 一.音频标签 在HTML5当中有一个叫做audio的标签,可以直接引入一段音频资源放到我们的网页当中 格式: 降级的文字说明(当音频文件不能本浏 ...
- HTML5中拖动功能的添加属性,html5中可拖动dragable属性及其他成员的讲解
html5中可拖动dragable属性及其他成员的讲解 发布时间:2020-04-22 11:08:02 来源:亿速云 阅读:350 作者:小新 这篇文章主要为大家详细介绍了html5中可拖动drag ...
- HTML5中最重要的技术点有哪些
HTML5在发展中不断的更新其自身技术,所以即便是HTML5从业者也会需要不断的去学习.掌握其新特性.本文总结一些HTML5中重要的技术点,希望对你有帮助. 为什么HTML5里面我们不需要DTD(Do ...
- html中section与div,HTML5中div、section、article的区别
HTML5中新增了...... 多个有语义的结构化标签元素.其中section和article这两个标签和div差不多功能,很容易混淆. div(分区division) 这个标签是我们见得最多.用得最 ...
- html5中音乐播放器怎么写,html5简单音乐播放器
自己写的一个简单的音乐播放器, 主要实现了控制播放暂停,时间显示,音乐进度条点击以及拖动改变播放进度效果. 基于jquery编写,需要引入jquery. HTML: 00:00:00 00:00:00 ...
- 第六节:用audio标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...
- html音乐播放器标签,打造属于自己的音乐播放器 HTML5之audio标签
我的音乐播放器 HTML5中增加了Audio和Video标签,这两个标签的用法非常相似.功能却是相当强大,我们先来看一下Audio标签各个浏览器的支持情况.这里用的依然是Can I Use这个在线网站 ...
- html5播放器源码自己添加音乐,HTML5 audio标签 打造属于自己的音乐播放器
最近学习了HTML5中的Audio标签,学习他的最好方式当然是实践,于是就自己写了一个.那就直接上演示链接吧 http://htmlpreview.github.io/?https://github. ...
最新文章
- 全景图拼接算法实现与改进
- Centos6部署lamp: httpd2.4+module模式
- Doctype? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
- C# 文件流操作 之 删除、复制、转移多个文件
- ImportError: No module named 'matplotlib'(python 安装各种 )
- [PAL规范]SAP HANA PAL演绎推理算法Apriori编程规范APRIORIRULE
- js获取时间(本周、本季度、本月..)
- Linux基础(13)文本查找利器find的使用方法
- Linux dstat 命令
- docx文档怎么排列图片_打开.docx文件的6种方法分享:docx文件怎么打开?
- Tomcat7升级到Tomcat9
- php storm 安装,PhpStorm安装教程
- VMware 的安装和破解密码
- 浅谈C中的malloc和free “来自bccn C语言论坛”
- 中文和拼音的相关转换
- PHP MVC框架初探
- 广东率先启动大数据战略
- 2021-08-10校网比赛A题
- 计算机键盘打字基础知识,电脑键盘基础知识
- git 提交代码解冲突
热门文章
- sql intersect mysql_SQL INTERSECT子句
- resnet过拟合_重读经典:完全解析特征学习大杀器ResNet
- 隐马尔可夫模型 HMM 原理及实现
- matlab_ga(),matlab遗传算法ga函数
- python关键字详解_Python 中的关键字with详解
- 前端全栈大佬是如何使用javaScript实现一个轮播图
- 8g可用 安装内存16g_同样是16g内存,为啥都选两条8G,不选16G单条,这难道有啥讲究?...
- 学java前要学css_教你一招:学习Java必须学会的CSS用法
- 微信小程序 网络请求之设置合法域名
- 深入理解line-height与vertical-align——前端布局常用属性