您正在查看: 包含标签 HTML5 下的文章

解决 Audio 元素 currentTime 属性不准确的问题

之前的 KK Player 有一个问题,就是在 Internet Explorer / Microsoft Edge 下如果拖动进度条播放时间会很诡异。
日前又发现 Firefox 下也有问题,点击跳转到 2 分钟,虽然显示是到了,但是实际上只有 1 分 50 秒多的样子

这个问题其实很早就知道了,只是当时以为是微软的 bug,然后加上 IE 用户不算多,就暂时放置了。

这个问题怎么看怎么像浏览器的问题,于是准备到 stackoverflow 提问的,偶然看到系统推荐的一条类似问题

大致解释下,MP3 是有损压缩格式,浏览器没办法根据时间找到对应的文件流位置(然而并不知道 Chrome 是怎么做到的),所以会出现如此鬼畜的时间。
解决办法只有换用 OGG 格式的无损音频

然而这下问题更大了,IE / Edge 压根不支持这格式… 可以点击这里查看 OGG 的浏览器兼容情况

根据浏览器兼容性报告,似乎只有 MP3 格式兼容性最好…
直到后来找到了 AAC 格式,兼容性报告在这里
而且 ACC 格式的 currentTime 也没有问题

于是目前就先用 ACC 格式存放歌曲,待浏览器兼容性改善再考虑用 OGG

HTML5 Notification API

与 WebkitNotification 的区别

过去,我们使用 window.webkitNotification 创建通知,但正如它的名字一样,这是个 Webkit 的专属接口,是在 HTML5 Notification 出来前的临时解决方案,在最新版 Chrome 中已经停用。

如何使用 HTML5 Notification API

根据 W3C 标准,创建一个 Notification 的正确方式是新建一个 Notification 对象,然后可以绑定这个对象的事件。不过在这之前,你需要用 Notification.requestPermission(callback) 方法请求创建通知的权限。

Notification 对象

创建一个 Notification 对象十分简单,只需要运行如下 JavaScript

var notification = new Notification(title, options)

其中 title 为通知的标题,options (可选) 为通知的参数,是一个 JavaScript 对象,对象可以包含如下属性:

dir: 显示顺序;可以使用 auto (自动)、ltr (从左到右)、trl (从右到左)
lang: 通知的语言;参见:RFC 5646: BCP 47 语言标识
body: 通知的正文
tag: 有点类似于 ID 的标识符
icon: 通知的图标

Notification 对象还有如下的静态属性:

Notification.permission
(只读) 用来查看当前网站是否有发送通知的权限

静态方法:

Notification.requestPermission
用于请求发送通知的权限,可以使用一个回调函数作为参数。在用户点击允许/拒绝时会触发回调函数

当你新建了 Notification 对象后,可以使用以下实例方法:

notificationObject.close()
关闭这条通知

notificationObject.addEventListener()
绑定事件监听器,这个不多说

notificationObject.removeEventListener()
跟上一个相反

Notification 对象后具有如下的事件:

notificationObject.onclick
当用户点击通知条时触发

notificationObject.onshow
当通知条显示后触发

notificationObject.onerror
当通知出现错误时触发(这个真没用过)

notificationObject.onclose
通知被关闭时触发

[DEMO] HTML5 音频播放器 (带歌词)

由于只是个Demo,所以可能比较简陋,css啥的还没弄……


歌曲 1:

守候 - 徐蓂蕾 我能等你吗? 在那淡淡月光下 静静想你 我能等你吗? 在那熟悉的地方 轻唤着你 风里传来你的呼吸 云里映着你的笑意 林里的鸟相偎相依 我却孤寂 我等你回来 把那窗儿打开 向我依赖 我等你回来 带着纯真的风采 宛如小孩 衣上装满你的记忆 夜里的梦多么清晰 冰冷黎明只剩叹息 如何忘你 迷离的夜 飘响着无边境的旋律 在耳边旋绕不停 能不能载着思绪的雨 带我找你 纵然是梦想也罢 宁愿寂寞放弃自由 怎样也想抓住你的手 春夏秋冬你的承诺 我会守候 迷离的夜 飘响着无边境的旋律 在耳边旋绕不停 能不能载着思绪的雨 带我找你 纵然是梦想也罢 宁愿寂寞放弃自由 怎样也想抓住你的手 春夏秋冬你的承诺 我会守候

歌曲 2:

Baby can't you see I'm calling A guy like you should wear a warning It's dangerous I'm falling There's no escape I can't wait I need a hit Baby give me it You're dangerous I'm loving it Tonight Can't calm down Losin my head Spinnin round and round Do you feel me now? With the taste of your lips I'm on a ride Your toxic tongue slippin mine (Ohh Ohh) With the taste of the poison paradise I'm addicted to you Don't you know that your toxic? And I love what you do Don't you know that your toxic? It's getting late to give you up I took a sip from a devil's cup Slowly It's taking over me Tonight Can't calm down It's in the air and it's all around Can you feel me now? With the taste of your lips I'm on a ride Your toxic tongue slippin mine (Ohh Ohh) With the taste of the poison paradise I'm addicted to you Don't you know that your toxic? And I love what you do Don't you know that your toxic? Don't you know that your toxic? With the taste of your lips I'm on a ride Your toxic tongue slippin mine (Ohh Ohh) With the taste of the poison paradise I'm addicted to you Don't you know that your toxic? With the taste of your lips I'm on a ride Your toxic tongue slippin mine (Ohh Ohh) With the taste of the poison paradise I'm addicted to you Don't you know that your toxic? Intoxicated now With your lovin now I think I'm ready now Intoxicated now With your lovin now I think I'm ready now