html5播放器源码自己添加音乐,HTML5 audio标签 打造属于自己的音乐播放器
最近学习了HTML5中的Audio标签,学习他的最好方式当然是实践,于是就自己写了一个。那就直接上演示链接吧
http://htmlpreview.github.io/?https://github.com/djlxiaoshi/Audio/blob/master/music.html。模仿了QQ音乐网页版的部分样式。谁叫自己不会UI呢!
HTML5中增加了Audio和Video标签,这两个标签的用法非常相似。功能却是相当强大,我们先来看一下Audio标签各个浏览器的支持情况。这里用的依然是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
我碰到这个问题的原因是,音乐没有加载(没有设置audio.src)就直接 audio.play() 此时不会报错 ,但是点击关闭按钮即执行 audio.pause()时,就会报这个错。底下为产生相同错误的测试代码
关闭
vardom=document.getElementById("audioDom");
dom.play();functiontest(){
dom.pause();
}
总结一点 就是如果产生类似问题,一定是你的播放逻辑产生了问题。
这是我个人播放器的github地址:音乐播放器目前还没有怎么整理优化,只是功能有了,金玉其外,败絮其中了,最后告诫大家一点,写代码一定要备份,一定要学会用git来管理自己的项目。这次本来有一个小bug,我想小bug改起来应该容易,不用备份,结果越改坑越大最后改的面目全非,一片混乱,一气之下又来一遍,每一次改动都会commit。
来源:https://www.cnblogs.com/djlxs/p/5650987.html
html5播放器源码自己添加音乐,HTML5 audio标签 打造属于自己的音乐播放器相关推荐
- 基于Java毕业设计音乐播放平台源码+系统+mysql+lw文档+部署软件
基于Java毕业设计音乐播放平台源码+系统+mysql+lw文档+部署软件 基于Java毕业设计音乐播放平台源码+系统+mysql+lw文档+部署软件 本源码技术栈: 项目架构:B/S架构 开发语言: ...
- html5 mp3播放器源码,HTML5自定义mp3播放器源码
audio对象 src兼容.ogg .wav .mp3 width autoplay loop muted静音 播放play() var myAudio = new Audio(); myAudio. ...
- Android---Service(生命周期、启动方式、服务通信、实战演练、思维导图、高级音乐播放器-源码)
目 录 一.服务的创建 二.服务的生命周期 三.服务的启动方式 (1)startService 方式 启动 服务 实战演练---startService (2)bindService 方式 启动 ...
- Android音乐播放器源码(歌词.均衡器.收藏.qq5.0菜单.通知)
一款Android音乐播放器源码,基本功能都实现了 qq5.0菜单(歌词.均衡器.收藏.qq5.0菜单.通知) 只有向右滑动出现,菜单键和指定按钮都还没有添加. 源码下载:http://code.66 ...
- 超美响应式自适应引导页带音乐播放器源码
介绍: 超美响应式自适应引导页带音乐播放器源码,纯html源码,右键记事本修改即可~自带音乐播放器,自带自动打字特效,自带网站存活时间,自带随机ACG背景,自适应响应式网页 网盘下载地址: http: ...
- java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 本源码技 ...
- linux 音频播放器源码,Android音乐播放器源码
相当完整的Android音乐播放器,直接上效果图及源代码,自己欣赏,具体不再解释了,可以说是一个很给力的Android音乐播放器. 示例代码: /* * Copyright (C) 2009 Tele ...
- Swift 第三方 播放器AliyunPlayer,音乐(阿里云播放器)(源码)
一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹.靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希 ...
- 计算机毕业设计Javavue开发一个简单音乐播放器(源码+系统+mysql数据库+lw文档)
计算机毕业设计Javavue开发一个简单音乐播放器(源码+系统+mysql数据库+lw文档) 计算机毕业设计Javavue开发一个简单音乐播放器(源码+系统+mysql数据库+lw文档) 本源码技术栈 ...
最新文章
- easyui框架前后端交互_Vue+ElementUI+.netcore前后端分离框架开发项目实战
- NOIP模拟题——dun
- 阿里云搭建nacos
- 报错,o.h.engine.jdbc.spi.SqlExceptionHelper : Unknown column ‘org0_.create_by‘ in ‘field list‘
- java实时监控数据变化_服务数据实时监控平台
- 线性回归(一元多元)建模步骤
- BootStrap布局案例
- 苹果cms主题模板M3.1版本 苹果CMSv10自适应主题
- 三维空间点到直线的距离C++实现
- 数据分析软件及spss简单操作
- android webview 下载文件
- 英语流利说 第39天
- 基于信用卡业务测试数据支持解决方案
- 用Cyberduck将4EVERLAND Bucket挂载到本地,构建属于自己的Web3云网盘
- pip uninstall
- centos7.6下载地址
- B2C电子商务网站的突围——再议什么是B2C网站
- SQL Server服务器名称
- maya中英文对照_最全Maya菜单中英对照表
- itutorgroup:在线教育与传统线下教育的七大区别你知多少?
热门文章
- 关于递归求解--子问题划分的分析思路总结
- LTspice XVII 电容充电仿真
- 三维激光扫描后处理软件_三维激光扫描技术在异形建筑幕墙安装中的应用
- 2019.08.17【NOIP提高组】模拟 A 组 比赛总结
- 中国变频器行业需求预测与投资战略规划分析报告2022-2028年版
- 山东省二级计算机在哪打印准考证,山东省3月全国计算机二级考试准考证打印时间...
- 【FMS】82页精彩PPT详解柔性制造系统(FMS)
- k线形态-T字线形态
- linux背光子系统(backlight)
- 2022全新Ripro日主题V9.0升级修正版源码+美化包和插件