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

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

python写服务器几点注意的地方

import os import time import sys import socket class server(): """ server """ def __init__(sel...
  • github_37157365
  • github_37157365
  • 2018年01月30日 12:10
  • 27

code:blocks安装的过程中几个问题

code:blocks安装的过程中遇到几个问题记录一下1、安装 建议安装稳定版本,自带编译器 codeblocks-16.01mingw-setup.exe(目前是最新版的) 官网地址:https:/...
  • adaixiaoxiao
  • adaixiaoxiao
  • 2016年10月27日 20:58
  • 173

JS实现HTML5音频播放自定义UI

此处首先放一个MDN上关于H5音频播放的文档 使用 HTML5 音频和视频 音频audio标签使用之后是默认带进度条的,所以audio标签中的属性是我们可以定制,选择将其全部隐藏就是了,然后自己实...
  • licheng11403080324
  • licheng11403080324
  • 2017年03月03日 21:32
  • 3726

html5 audio 自定义播放器

自定义内容包括,播放,暂停,停止,上一首,下一首,进度条显示,进度条拖动并实时显示拖动位置 注:此代码因为有ajax跟服务器的通讯,所以是放在wampsever环境中运行,读者可以自行先替换默认播放的...
  • xiongqiangwin1314
  • xiongqiangwin1314
  • 2015年09月07日 10:18
  • 832

vi使用时的注意事项

1. vi 的基本概念 基本上vi可分为三种操作状态,分别是命令模式(Command mode)、插入模式(Insert mode)和底线命令模式(Last line mode),各模式的功能区...
  • snaking616
  • snaking616
  • 2017年09月20日 15:53
  • 152

HTML5 Audio API

话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代。但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等...
  • qq_24193261
  • qq_24193261
  • 2016年09月01日 14:00
  • 604

浅谈HTML5中的<audio>和<video>

1、video和audio的优点: 不需要第三方插件就能播放音频和视频了,可以直接插入,并且用同一的API接口控制。   2、video和audio的缺点: 1) 暂时没有对流视频的支持和规范。流媒体...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年04月04日 16:50
  • 1384

html5中audio的详细使用

html5的audio功能上已经非常强大,回放,跳转,缓冲等以前只能用flash才能实现的功能,html5的audio都能轻松搞定 最近的一个项目使用到了这个功能,把我使用的情况写下来,供大家参考 ...
  • alongken2005
  • alongken2005
  • 2015年03月23日 21:26
  • 46442

html5音视频播放及CSS效果样式搭配

这几天一直在研究html5环境下样式效果展现问题,htm5的标签更加简洁,结合jquery和bootstrap3,能够很好地做出自己想要的比较绚丽的页面特效。 这里介绍下音视频播放用到的js库: ...
  • shaobingj126
  • shaobingj126
  • 2013年10月09日 16:10
  • 23358

释放 HTML5 <audio> 的力量

作者:Giorgio Sardo | 高级技术推广师 – HTML5 和 Internet Explorer 各种声音构成了我们的生活背景。现在,HTML5 元素使 Web 开发人员可以将声音嵌入他...
  • hdchangchang
  • hdchangchang
  • 2013年12月24日 16:50
  • 8260
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5,定制<audio>需注意的事项
举报原因:
原因补充:

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