最终,做了自己原来一直想要实现的事儿。得出的结果是,有些事儿一旦開始做了,那么它就并非非常难。

如今的我,正听着自己的播放器放出的《光辉岁月》写这篇周六清晨的博文。写的不是非常好。但也请各位前辈担待一下我这个什么都不懂的菜鸟,也希望各位前辈积极地指正我的错误,小弟感激不尽!

正式内容前,能够先预览一下效果,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音乐播放器的更多相关文章

  1. html5 简单音乐播放器

    html5 简单音乐播放器 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  2. html5版 音乐播放器

    html5版本音乐播放器,支持iOS设备,案例地址:http://www.xttblog.com/?p=1277 功能说明 支持iOS设备,但是iOS不支持自动下一曲,这是iOS本身限制,支持touc ...

  3. HTML5网页音乐播放器

    1功能介绍 HTML5中推出了音视频标签,可以让我们不借助其他插件就可以直接播放音视频.下面我们就利用H5的audio标签及其相关属性和方法来制作一个简单的音乐播放器.主要包括以下几个功能: 1.播放 ...

  4. html5 jquery音乐播放器,play()和pause()不起作用

    今天在自己写的页面上加上背景音乐,当我点击图片时可以切换 播放/暂停 用jquery写的,方法总是提示没有pause这个方法! 检查了半天最后发现 你使用的是jquery选择器所以返回的是jquery ...

  5. HTML5环形音乐播放器

    在线演示 本地下载

  6. HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

  7. 使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

  8. 用<audio>标签打造一个属于自己的HTML5音乐播放器

    上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...

  9. 4个小时实现一个HTML5音乐播放器

    技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...

随机推荐

  1. AngularJs 特性 之 指令系统

    <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="utf- ...

  2. xtrabackup安装使用说明

    软件介绍: Percona XtraBackup是一块开源且免费的对MySQL Innodb存储引擎备份数据的工具,使用此工具的时候不需停止MySQL,而且支持压缩备份,支持对Innodb存储引擎做增 ...

  3. 0-Android使用Ashmem机制进行跨进程共享内存

    Android使用Ashmem机制进行跨进程共享内存 来源: http://blog.csdn.net/luoshengyang/article/details/6651971 导语: 在Androi ...

  4. UVA 11991 vector

    Though Rujia Liu usually sets hard problems for contests (for example, regional contests likeXi’an 2 ...

  5. vscode设置背景图片

    最近在知乎上看见有人设置了vscode编辑器的背景图片,觉得很新鲜,就尝试以一下,倒是成功了. 1.首先在vscode扩展中,找到background这个插件,快捷键Ctrl+shift+x 2.完成 ...

  6. iterator & iterable

    一. java.lang.Iterable java.util.Iterator Iterator是迭代器类,而Iterable是接口. 好多类都实现了Iterable接口,这样对象就可以调用iter ...

  7. idea下载多个插件项目启动不了解决方案

    今天下载mybatis plugin插件的时候 有好多个版本的plugin,然后呢,看第二个比较热门,就下载了第二个,然后重启idea发现这个插件貌似得花钱,那算了吧,咱用第一个免费的吧,就又下载了第 ...

  8. 存储过程中set什么什么的讲解

    原文发布时间为:2008-09-27 -- 来源于本人的百度文章 [由搬家工具导入] set ansi_nulls [on/off] 与 set quoted_identifier [on/off] ...

  9. display的32种写法

    你知道『回』字有四种写法,但你知道display有32种写法吗?今天我们一一道来,让你一次性完全掌握display,从此再也不用对它发愁. 从大的分类来讲,display的32种写法可以分为6个大类, ...

  10. C#图解教程学习笔记——类相关的概念

    一.一些基本概念1. 字段:隶属于类的变量,即类的成员变量.2. 方法:隶属于类的函数,即类的成员函数.3. 实例成员:类的每个实例拥有自己的各个类成员的副本,这些成员称为实例成员. 改变一个实例字段 ...