<audio src="我的好兄弟.mp3" controls="controls"  id="audio" style="width:500px; max-height:40px; background:#ccc">
            您的老牛已经拉不动破车了,赶紧换了吧,想听中国好声音么?
</audio>

js:

var _audio = $('#audio')[0];

//默认的时候让所有的音频加载,否则在火狐ie等浏览器下由于jquery插件的存在导致onloadedmetadata事件不响应
_audio.load();

//音频加载完成后的一系列操作
function duration(){
    if( _ReviewsBox.hasClass('homework-audio-loading') ){
        return false;
    }
    var time = _audio.duration;
        //分钟
    var minute = time / 60;
    var minutes = parseInt(minute);
    if (minutes < 10) {
        minutes = "0" + minutes;
    }
    //秒
    var second = time % 60;
    var seconds = Math.round(second);
    if (seconds < 10) {
        seconds = "0" + seconds;
    }

//总共时长的秒数
    var allTime = parseInt(minutes*60 + seconds);
}

_audio.onloadedmetadata = duration;

js获取html5 audio 音频时长方法的更多相关文章

  1. js获取video的播放时长

      setTimeout(function () { var vid = document.getElementById("videoIntro"); var currentTim ...

  2. JS指定音频audio在某个时间点进行播放,获取当前音频audio的长度,音频时长格式转化

    前言: 今天接到一个需求,需要获取某个.mp3音频文件的时间长度和指定音频audio在某个时间点进行播放(比如说这个视频有4分钟,我要让它默认从第2秒的时候开始播放),这里当然想到了H5中的audio ...

  3. html5 audio音频播放全解析

    序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...

  4. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

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

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  6. HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  7. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  8. C# 获取媒体文件播放时长

    引用: Interop.Shell32.dll 方法: /// <summary> /// 获取媒体文件播放时长 /// </summary> /// <param na ...

  9. c#获取Amr文件的时长(毫秒)亲测有效

    /// <summary> /// c#获取Amr文件的时长(毫秒) /// </summary> /// <param name="fileName" ...

随机推荐

  1. 用SDWebImage渐变加载图片

    用SDWebImage渐变加载图片 使用 使用请详细查看源码,只需要给定一个图片地址以及一个placeHolder图片(非必须)即可. 效果 源码 https://github.com/YouXian ...

  2. Undefined symbols for architecture i386: "_deflate", referenced from:

    Undefined symbols for architecture i386: "_deflate", referenced from: PlatCompress(enumCom ...

  3. WindowsPhone-GameBoy模拟器开发五--使用XNA初略实现Gameboy显示系统

    开篇前,最近弄了个空间,大家不嫌弃的话可以上去讨论讨论J http://www.lihengzhe.cn 这一次,就来简单地实现gameboy的实现机制.先说一下本次内容涉及到的技术,其实也就一项—X ...

  4. FoxMail的Bug

    Foxmail 7.2 build6.040,win7中文专业版 下载腾讯的企业邮箱的邮件, 自动配置为imap收邮件 收件箱应该为1740封 邮件 实际foxmail却只收到1500多封 改成pop ...

  5. 进程、线程、轻量级进程、协程与 go 的 goroutine【转载+整理】

    本文内容 进程 线程 协程 Go 中的 goroutine 参考资料 最近,看一些文章,提到"协程"的概念,心想,进程,线程,协程,前两个很容易,任何一本关于操作系统的书都有说,开 ...

  6. android 渐变展示启动屏

    启动界面Splash Screen在应用程序是很常用的,往往在启动界面中显示产品Logo.公司Logo或者开发者信息,如果应用程序启动时间比较长,那么启动界面就是一个很好的东西,可以让用户耐心等待这段 ...

  7. “You must not call setTag() on a view Glide is targeting” 解决

    报错原因大致是因为Glide加载的iamgeView调用了setTag()方法导致的错误, 因为Glide已经默认为ImageView设置的Tag. 解决办法:自定义一个Application,在里面 ...

  8. android开发(49) android 使用 CollapsingToolbarLayout ,可折叠的顶部导航栏

    概述 在很app上都见过 可折叠的顶部导航栏效果.google support v7  提供了 CollapsingToolbarLayout 可以实现这个效果.效果图如下:    实现步骤 1. 写 ...

  9. 深入解析Oracle 10g中SGA_MAX_SIZE和SGA_TARGET参数的区别和作用

    原文链接:http://m.blog.csdn.net/blog/aaron8219/40037005 SGA_MAX_SIZE是从9i以来就有的作为设置SGA大小的一个参数,而SGA_TARGET则 ...

  10. 康力优蓝机器人 -- 优友U05类人型机器人发布

    [寒武计划]优友U05类人型机器人发布: http://digi.tech.qq.com/a/20151124/043234.htm?pgv_ref=aio2015&ptlang=2052 北 ...