html5,定制<audio>需注意的事项

原创 2016年08月31日 10:30:47

现在我写的这个,不能拖动进度条,不能切换上下的audio


1.播放按钮的变化,2个播放/暂停的图片。

$('.audio-pic').click(function () {
    $(this).toggleClass(function () {
        if ($(this).hasClass("start")) {
            return "pause"
        } else {
            return "start"
        }
    });
})


2.进度条

一个是总的进度条,放在最下面。

一个是当前进度条,覆盖在总进度上面。

一个是当前进度的位置,可以理解为上面的一个小块,放在当前进度条的右边(可有可无)


3.动态进度条

currentTime:设置或返回音频/视频中的当前播放位置(以秒计)

duration:返回当前音频/视频的长度(以秒计)


4.paly pause 两个事件切换

if (audio.paused) {
    audio.play();
} else {
    audio.pause()
    clearInterval(aaa);
}


5.计算时长,监听音频加载完成的状态

durationchange:当音频/视频的时长已更改时

$audio.on('durationchange', function () {
    //音频加载完成后,计算总时长
    if (totalTime < 60) {
        $('.audio-time.total').html("00:" + Math.ceil(totalTime))
    } else {
        seconds = Math.ceil(totalTime % 60);
        minutes = Math.ceil(totalTime / 60);
        $('.audio-time.total').html(minutes + ":" + seconds)
    }
})

6.音频播放完成后,要做的变化

播放按钮的图片切换

进度条和进度指示块的变化

currentTime重置为0

返回当前音频/视频的长度(以秒计)
版权声明:本文为博主原创文章,未经博主允许不得转载。

[HTML5]Application Cache使用中需要注意的事项

之前在分享HTML5中,经常会提到离线缓存--Application Cache,学习的时候只是知其然,并不知其所以然,仅仅是通过文档了解其语法。 这次在手机当当网触屏版的优化中,对于首页当我使用A...

关于 HTML5 你需要注意的事项

HTML5的到来将第五代网络语言带入了多媒体的世界。尽管HTML5的启动并没有多轰轰烈烈,但是在过去6个月还是有不少的软件开发者开始应用HTML5。然而,在选择HTML5时,有一些基本注意事项大家还是...

HTML5参训笔记---javascript编写注意事项

一、javascript中避免起首的大括号换行的风格 var log = function () {   cosole.log("do not code with this style"); }应...

HTML5中 audio标签的样式修改

由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,那么要怎么改变这个样式呢,其实它的原理比...
  • l333f
  • l333f
  • 2017年03月08日 17:48
  • 2375

HTML5 Audio/Video 标签,属性,方法,事件汇总

标签属性: src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 Html代码   1.    id="me...
  • jjx0224
  • jjx0224
  • 2013年12月10日 17:02
  • 11594

HTML5+规范:audio(音频的录制和播放功能)

Audio模块用于提供音频的录制和播放功能,可调用系统的麦克风设备进行录音操作,也可调用系统的扬声器设备播放音频文件。通过plus.audio获取音频管理对象。 1、常量   ROUTE_SPEA...

HTML5快速入门实例(六)audio元素静态加载和动态加载实例

例子一: 浏览器不支持audio元素

html5 Audio音乐播放器(canvas圆形音乐播放进度条)(一)

html5 Audio音乐播放器(canvas圆形音乐播放进度条)主要用到的是 audio 和canvas,我们下来介绍下着来年哥哥标签以及它们的api: audio 属性 属性值 注释 ...

不同浏览器对于html5 audio标签和音频格式的兼容性

不同浏览器对于html5 audio标签和音频格式的兼容性 音频格式 Chrome Firefox IE9 Opera Safari ...

html5 audio 自定义播放器

自定义内容包括,播放,暂停,停止,上一首,下一首,进度条显示,进度条拖动并实时显示拖动位置 注:此代码因为有ajax跟服务器的通讯,所以是放在wampsever环境中运行,读者可以自行先替换默认播放的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5,定制<audio>需注意的事项
举报原因:
原因补充:

(最多只允许输入30个字)