html5,audio音乐播放器
最终,做了自己原来一直想要实现的事儿。得出的结果是,有些事儿一旦開始做了,那么它就并非非常难。
如今的我,正听着自己的播放器放出的《光辉岁月》写这篇周六清晨的博文。写的不是非常好。但也请各位前辈担待一下我这个什么都不懂的菜鸟,也希望各位前辈积极地指正我的错误,小弟感激不尽!
正式内容前,能够先预览一下效果,http://xxyy.ahthw.com//xiaoyu/musicV1.0/Music1.0.html (在这里。再次感谢王哥提供的server。)
本项目主要用到了html5的audio标签以及它所自带的方法和属性,IE9+浏览器兼容。
关于audio相关的Api请參阅:http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
值得一提的是。在项目中,遇到了这种一个问题,依据正常的思维。一首音乐播放的流程是这种:
点击事件更换audio的src。音乐又一次载入,audio.load(),然后播放音乐audio.play()。在然后去获取音乐的总时长。audio.duration,可是这时候获取的时间总设计NaN,这个问题让我纠结了许久,想必也大概能分析出问题的解决办法。当浏览器去运行的audio.play()的时候。音乐可能还未载入。就已经运行了audio.duration,所以获取到的时间值总是为NaN,再次感谢无痕哥提供的解决方式。
通过监听这首歌是否已经播放(canplay),去获取时间,相关的Api,http://www.w3school.com.cn/tags/av_event_canplay.asp
解决代码:
MusicPlayer.addEventListener('canplay', function(e){
$AllTime.text(makeTime(MusicPlayer.duration));//makeTime是处理把秒处理成00:00格式的函数
AllTime = MusicPlayer.duration;
}, false);
事实上这个问题,还是因为自己第一次写,经验少,没有细致查看Api导致的,希望和我一样的菜鸟不会犯和我一样的错误。
在总体效果中,有一个依据内容的高度和容器的高度对照来加入虚拟滚动栏的效果,关于滚动栏代码请參考上一篇博文:
http://blog.csdn.net/u014703834/article/details/44159921
详细的项目代码就不在这里一一体现,有兴趣的朋友能够加我QQ:756500909。或者在线留下邮箱地址,我会把源文件分享给你。
希望能一起交流技术和经验!
html5,audio音乐播放器的更多相关文章
- html5 简单音乐播放器
html5 简单音乐播放器 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- html5版 音乐播放器
html5版本音乐播放器,支持iOS设备,案例地址:http://www.xttblog.com/?p=1277 功能说明 支持iOS设备,但是iOS不支持自动下一曲,这是iOS本身限制,支持touc ...
- HTML5网页音乐播放器
1功能介绍 HTML5中推出了音视频标签,可以让我们不借助其他插件就可以直接播放音视频.下面我们就利用H5的audio标签及其相关属性和方法来制作一个简单的音乐播放器.主要包括以下几个功能: 1.播放 ...
- html5 jquery音乐播放器,play()和pause()不起作用
今天在自己写的页面上加上背景音乐,当我点击图片时可以切换 播放/暂停 用jquery写的,方法总是提示没有pause这个方法! 检查了半天最后发现 你使用的是jquery选择器所以返回的是jquery ...
- HTML5环形音乐播放器
在线演示 本地下载
- HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
- 使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
- 用<audio>标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...
- 4个小时实现一个HTML5音乐播放器
技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...
随机推荐
- AngularJs 特性 之 指令系统
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf- ...
- xtrabackup安装使用说明
软件介绍: Percona XtraBackup是一块开源且免费的对MySQL Innodb存储引擎备份数据的工具,使用此工具的时候不需停止MySQL,而且支持压缩备份,支持对Innodb存储引擎做增 ...
- 0-Android使用Ashmem机制进行跨进程共享内存
Android使用Ashmem机制进行跨进程共享内存 来源: http://blog.csdn.net/luoshengyang/article/details/6651971 导语: 在Androi ...
- UVA 11991 vector
Though Rujia Liu usually sets hard problems for contests (for example, regional contests likeXi’an 2 ...
- vscode设置背景图片
最近在知乎上看见有人设置了vscode编辑器的背景图片,觉得很新鲜,就尝试以一下,倒是成功了. 1.首先在vscode扩展中,找到background这个插件,快捷键Ctrl+shift+x 2.完成 ...
- iterator & iterable
一. java.lang.Iterable java.util.Iterator Iterator是迭代器类,而Iterable是接口. 好多类都实现了Iterable接口,这样对象就可以调用iter ...
- idea下载多个插件项目启动不了解决方案
今天下载mybatis plugin插件的时候 有好多个版本的plugin,然后呢,看第二个比较热门,就下载了第二个,然后重启idea发现这个插件貌似得花钱,那算了吧,咱用第一个免费的吧,就又下载了第 ...
- 存储过程中set什么什么的讲解
原文发布时间为:2008-09-27 -- 来源于本人的百度文章 [由搬家工具导入] set ansi_nulls [on/off] 与 set quoted_identifier [on/off] ...
- display的32种写法
你知道『回』字有四种写法,但你知道display有32种写法吗?今天我们一一道来,让你一次性完全掌握display,从此再也不用对它发愁. 从大的分类来讲,display的32种写法可以分为6个大类, ...
- C#图解教程学习笔记——类相关的概念
一.一些基本概念1. 字段:隶属于类的变量,即类的成员变量.2. 方法:隶属于类的函数,即类的成员函数.3. 实例成员:类的每个实例拥有自己的各个类成员的副本,这些成员称为实例成员. 改变一个实例字段 ...