JS指定音频audio在某个时间点进行播放


Posted in Javascript onNovember 28, 2020

前言:

今天接到一个需求,需要获取某个.mp3音频文件的时间长度和指定音频audio在某个时间点进行播放(比如说这个视频有4分钟,我要让它默认从第2秒的时候开始播放),这里当然想到了H5中的audio元素,当然我们平时看这个标签上显示的音频时间格式是时:分:秒的格式的因此需要涉及到秒和时间格式的转化。因为刚开始对这块十分的陌生,最后通过查阅了网上的一些资料,最终完美的把这些功能点做好了。在这里分享一下,希望能够帮助有需要的小伙伴。

获取音频时长:

function getAudioDuration(src) {
      let audio = document.createElement('audio') //生成一个audio元素 
      audio.src = src //音乐的路径 
      audio.addEventListener("canplay", function () {
        console.log("音频长度=>>>:", parseInt(audio.duration) + '秒', '音频时分秒格式:', timeToMinute(parseInt(audio
          .duration)));
      });
    }

指定音频audio在某个时间点进行播放:

指定默认从第20s开始播放效果图:

JS指定音频audio在某个时间点进行播放

// 音频加载完成后的一系列操作
    function duration() {
      var myVid = document.getElementById("videoDiv");
      console.log("duration ", myVid);
      if (myVid != null) {
        var duration;
        myVid.load(); //方法重新加载音频/视频元素
        // https://www.w3school.com.cn/tags/av_prop_currenttime.asp
        // currentTime 属性设置或返回音频/视频播放的当前位置(以秒计)。
        // 当设置该属性时,播放会跳跃到指定的位置。
        myVid.currentTime = 20; //默认指定音频默认从20s的时候开始播放(默认时间为s)
        myVid.oncanplay = function () {
          //duration 属性返回当前音频的长度,以秒计。
          console.log("音频时间", myVid.duration);
          console.log("时分秒格式转化:", timeToMinute(myVid.duration))
        }
      }
    }

秒转换时分钟00:00:00时分秒格式:

function timeToMinute(times) {
      var t;
      if (times > -1) {
        var hour = Math.floor(times / 3600);
        var min = Math.floor(times / 60) % 60;
        var sec = times % 60;
        if (hour < 10) {
          t = '0' + hour + ":";
        } else {
          t = hour + ":";
        }

        if (min < 10) {
          t += "0";
        }
        t += min + ":";
        if (sec < 10) {
          t += "0";
        }
        t += sec.toFixed(2);
      }
      t = t.substring(0, t.length - 3);
      return t;
    }

00:00:00时分秒格式转化为秒:

function timeEvent(e) {
      let time = e;
      var len = time.split(':');
      if (len.length == 3) {
        var hour = time.split(':')[0];
        var min = time.split(':')[1];
        var sec = time.split(':')[2];
        return Number(hour * 3600) + Number(min * 60) + Number(sec);
      }
      if (len.length == 2) {
        var min = time.split(':')[0];
        var sec = time.split(':')[1];
        return Number(min * 60) + Number(sec);
      }
      if (len.length == 1) {
        var sec = time.split(':')[0];
        return Number(sec);
      }
    }

完整代码:

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <audio controls autoplay start="01:00" id='videoDiv'>
    <source src="http://mp3.9ku.com/hot/2005/05-19/65937.mp3" type="audio/ogg">
  </audio>

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
      //js获取某个mp3音频文件的播放时长
      getAudioDuration('http://mp3.9ku.com/hot/2005/05-19/65937.mp3');

      duration();
      console.log("转化为多少秒=》》", timeEvent("00:14:36"));
    })

    // 音频加载完成后的一系列操作
    function duration() {
      var myVid = document.getElementById("videoDiv");
      console.log("duration ", myVid);
      if (myVid != null) {
        var duration;
        myVid.load(); //方法重新加载音频/视频元素
        // https://www.w3school.com.cn/tags/av_prop_currenttime.asp
        // currentTime 属性设置或返回音频/视频播放的当前位置(以秒计)。
        // 当设置该属性时,播放会跳跃到指定的位置。
        myVid.currentTime = 20; //默认指定音频默认从20s的时候开始播放(默认时间为s)
        myVid.oncanplay = function () {
          //duration 属性返回当前音频的长度,以秒计。
          console.log("音频时间", myVid.duration);
          console.log("时分秒格式转化:", timeToMinute(myVid.duration))
        }
      }
    }

    function getAudioDuration(src) {
      let audio = document.createElement('audio') //生成一个audio元素 
      audio.src = src //音乐的路径 
      audio.addEventListener("canplay", function () {
        console.log("音频长度=>>>:", parseInt(audio.duration) + '秒', '音频时分秒格式:', timeToMinute(parseInt(audio
          .duration)));
      });
    }

    // 秒转换时分钟00:00:00格式
    function timeToMinute(times) {
      var t;
      if (times > -1) {
        var hour = Math.floor(times / 3600);
        var min = Math.floor(times / 60) % 60;
        var sec = times % 60;
        if (hour < 10) {
          t = '0' + hour + ":";
        } else {
          t = hour + ":";
        }

        if (min < 10) {
          t += "0";
        }
        t += min + ":";
        if (sec < 10) {
          t += "0";
        }
        t += sec.toFixed(2);
      }
      t = t.substring(0, t.length - 3);
      return t;
    }

    // 00:00:00时分秒格式转化为秒
    function timeEvent(e) {
      let time = e;
      var len = time.split(':');
      if (len.length == 3) {
        var hour = time.split(':')[0];
        var min = time.split(':')[1];
        var sec = time.split(':')[2];
        return Number(hour * 3600) + Number(min * 60) + Number(sec);
      }
      if (len.length == 2) {
        var min = time.split(':')[0];
        var sec = time.split(':')[1];
        return Number(min * 60) + Number(sec);
      }
      if (len.length == 1) {
        var sec = time.split(':')[0];
        return Number(sec);
      }
    }
  </script>
</body>

</html>

参考文章:

https://www.zhangxinxu.com/wordpress/2019/07/html-audio-api-guide/

https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

https://blog.csdn.net/qq_31984879/article/details/84071245

https://www.w3school.com.cn/tags/av_prop_currenttime.asp

到此这篇关于JS指定音频audio在某个时间点进行播放的文章就介绍到这了,更多相关JS音频audio长度内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
Knockout数组(observable)使用详解示例
Nov 15 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
vue.js语法及常用指令
Oct 29 Javascript
Vue源码解读之Component组件注册的实现
Aug 24 Javascript
JQuery获得内容和属性方法解析
May 30 jQuery
vue实现在进行增删改操作后刷新页面
Aug 05 Javascript
vue实现表格合并功能
Dec 01 Vue.js
Vue用mixin合并重复代码的实现
Nov 27 #Vue.js
js实现扫雷源代码
Nov 27 #Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 #Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 #Vue.js
JavaScript中的Proxy对象
Nov 27 #Javascript
详解JavaScript中的链式调用
Nov 27 #Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 #Vue.js
You might like
javascript 函数式编程
2007/08/16 Javascript
Javascript模块模式分析
2008/05/16 Javascript
纯js实现div内图片自适应大小(已测试,兼容火狐)
2014/06/16 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
jQuery实用技巧必备(上)
2015/11/02 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
最好用的Bootstrap fileinput.js文件上传组件
2016/12/12 Javascript
node.js 和HTML5开发本地桌面应用程序
2016/12/13 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
Python运算符重载详解及实例代码
2017/03/07 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Django框架实现的普通登录案例【使用POST方法】
2019/05/15 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
python 实现读取csv数据,分类求和 再写进 csv
2020/05/18 Python
Python如何给函数库增加日志功能
2020/08/04 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
师范毕业生自荐信
2013/10/17 职场文书
物业管理毕业生的自我评价
2014/02/17 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
诚信的演讲稿范文
2014/05/12 职场文书
甘南现象心得体会
2014/09/11 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
党员检讨书
2014/10/13 职场文书