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 学习小结(适合新手参考)
Jul 30 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
uploader秒传图片到服务器完整代码
Apr 22 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
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
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
实现无刷新联动例子汇总
2015/05/20 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
微信小程序 navigation API实例详解
2016/10/02 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
js数组去重的方法总结
2019/01/18 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
js实现轮播图特效
2020/05/28 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
跟老齐学Python之玩转字符串(1)
2014/09/14 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Python tcp传输代码实例解析
2020/03/18 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
汇科协同Java笔试题
2012/03/31 面试题
普通院校学生的自荐信
2013/11/27 职场文书
商场经理竞聘演讲稿
2014/01/01 职场文书
信访工作者先进事迹
2014/01/17 职场文书
给校长的一封检讨书
2014/09/20 职场文书
工程质检员岗位职责
2015/04/08 职场文书
入党转正介绍人意见
2015/06/03 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书