JavaScript 计算音频时长

1. 使用Audio获取duration

  let audioUrl;
  let duration = 0;
  const processDuration = (blob: Blob) => {
    const reader = new FileReader();
    reader.onloadend = e => {
      audioUrl = reader.result as string;
      var media = new Audio(reader.result as string);
      media.onloadedmetadata = function() {
        if (media.duration != Infinity) {
          duration = media.duration;
        }
      };
    };
    reader.readAsDataURL(blob);
  };

但这个方法在Chrome上会存在bug,可能会计算duration为Infinity。可以尝试用下面方法解决。

2. 直接获取audiobuffer的duration

audioBuffer.duration

3. 用arraybuffer计算duration

如果获取的是纯pcm数据的arraybuffer,且知道audio的samplerate,计算$$duration = arraybuffer.bytelength / sampleRate / 2$$

Original: https://www.cnblogs.com/xym4869/p/13826630.html
Author: Shaw_喆宇
Title: JavaScript 计算音频时长

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/535904/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • 深入理解 JavaScript 异步系列(4)—— Generator

    第一部分,ES6 中的 Generator 原文地址http://www.cnblogs.com/wangfupeng1988/p/6532713.html 未经作者允许不得转载~…

    JavaScript 2023年5月29日
    086
  • 十个JavaScript中易犯的小错误,你中了几枪?

    序言 在今天,JavaScript已经成为了网页编辑的核心。尤其是过去的几年,互联网见证了在SPA开发、图形处理、交互等方面大量JS库的出现。 如果初次打交道,很多人会觉得js很简…

    JavaScript 2023年5月29日
    095
  • Javascript 异步加载详解(转)

    本文总结一下浏览器在 javascript 的加载方式。 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy executio…

    JavaScript 2023年5月29日
    087
  • JavaScript中的Generator函数

    1. 简介 Generator函数时ES6提供的一种异步编程解决方案。Generator语法行为和普通函数完全不同,我们可以把Generator理解为一个 包含了多个内部状态的状态…

    JavaScript 2023年5月29日
    061
  • 你不知道的 JavaScript 系列中( 25 ) - toBoolean

    以下是假值: 假值的布尔强制类型转换结果为 false。 从逻辑上说,假值列表以外的都应该是真值。但 JavaScript 规范对此并没有明确定义,只是给出了一些示例,例如规定所有…

    JavaScript 2023年5月29日
    066
  • 使用SeaJS实现模块化JavaScript开发

    此时index.html需要引用module1.js及其所有下层依赖(注意顺序): 随着项目的进行,js文件会越来越多,依赖关系也会越来越复杂,使得js代码和html里的scrip…

    JavaScript 2023年5月29日
    071
  • 用JavaScript玩转游戏物理(一)运动学模拟与粒子系统

    系列简介 也许,三百年前的艾萨克·牛顿爵士(Sir Issac Newton, 1643-1727)并没幻想过,物理学广泛地应用在今天许多游戏、动画中。为什么在这些应用中要使用物理…

    JavaScript 2023年5月29日
    068
  • 你从未听说过的 JavaScript 早期特性

    最近这些年在对 JavaScript 进行考古时,发现网景时代的 JavaScipt 实现,存在一些鲜为人知的特性,我从中挑选几个有趣的说一下。 Object.prototype….

    JavaScript 2023年5月29日
    074
  • 你不知道的 JavaScript 系列中( 28 ) - && 和 ||

    && 和 || 运算符的返回值并不一定是布尔类型,而是两个操作数其中一个的值。 对于 || 来说,如果条件判断结果为 true 就返回第一个操作数(a 和 c)的值…

    JavaScript 2023年5月29日
    071
  • JavaScript 多级联动select

    能够根据自定义的菜单数据和select,自动设置联级的下拉菜单,可定义默认值。 效果: 其中参数1是菜单结构: var menu =[{‘val ‘:&#8…

    JavaScript 2023年5月29日
    066
  • MathJax — A JavaScript display engine for mathematics that works in all browsers.

    MathJax https://www.mathjax.org/ web页面上的数学公式显示引擎。 使用纯web技术css等 支持多种输入格式: MathML Tex asciim…

    JavaScript 2023年5月29日
    073
  • 异步javascript的原理和实现

    因为工作的需要,我要在网页端编写一段脚本,把数据通过网页批量提交到系统中去。所以我就想到了Greasemonkey插件,于是就开始动手写,发现问题解决得很顺利。但是在对脚本进行总结…

    JavaScript 2023年5月29日
    073
  • javaScript系列 [45]-模版编译

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

    JavaScript 2023年5月29日
    073
  • JavaScript 多级联动浮动菜单

    请到这里看09-08-18更新版本 类似的多级浮动菜单网上也很多实例,但大部分都是只针对一种情况或不够灵活,简单说就是做死了的。所以我就想到做一个能够自定义菜单的,有更多功能的多级…

    JavaScript 2023年5月29日
    061
  • 转:JavaScript函数式编程(三)

    这是完结篇了。 在第二篇文章里,我们介绍了 Maybe、Either、IO 等几种常见的 Functor,或许很多看完第二篇文章的人都会有疑惑: 『这些东西有什么卵用?』 事实上,…

    JavaScript 2023年5月29日
    074
  • Javascript 严格模式

    严格模式是一种将更好的错误检查引入代码中的方法。 在使用严格模式时,你无法使用隐式声明的变量、将值赋给只读属性或将属性添加到不可扩展的对象等。 声明严格模式 可以通过在文件、程序或…

    JavaScript 2023年5月29日
    055
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球