devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：花生_TL007 | 2024-06-07 11:02:49

赞

踩

js获取音频长度

前言

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

获取音频时长

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

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

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

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

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

  1. function timeToMinute(times) {
  2.             var t;
  3.             if (times > -1) {
  4.                 var hour = Math.floor(times / 3600);
  5.                 var min = Math.floor(times / 60) % 60;
  6.                 var sec = times % 60;
  7.                 if (hour < 10) {
  8.                     t = '0' + hour + ":";
  9.                 } else {
  10.                     t = hour + ":";
  11.                 }
  12.  
  13.                 if (min < 10) {
  14.                     t += "0";
  15.                 }
  16.                 t += min + ":";
  17.                 if (sec < 10) {
  18.                     t += "0";
  19.                 }
  20.                 t += sec.toFixed(2);
  21.             }
  22.             t = t.substring(0, t.length - 3);
  23.             return t;
  24.         }

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

  1. function timeEvent(e) {
  2.             let time = e;
  3.             var len = time.split(':');
  4.             if (len.length == 3) {
  5.                 var hour = time.split(':')[0];
  6.                 var min = time.split(':')[1];
  7.                 var sec = time.split(':')[2];
  8.                 return Number(hour * 3600) + Number(min * 60) + Number(sec);
  9.             }
  10.             if (len.length == 2) {
  11.                 var min = time.split(':')[0];
  12.                 var sec = time.split(':')[1];
  13.                 return Number(min * 60) + Number(sec);
  14.             }
  15.             if (len.length == 1) {
  16.                 var sec = time.split(':')[0];
  17.                 return Number(sec);
  18.             }
  19.         }

完整代码

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.  
  6. </head>
  7.  
  8. <body>
  9.     <audio controls autoplay id='videoDiv'>
  10.         <source src="http://mp3.9ku.com/hot/2005/05-19/65937.mp3" type="audio/ogg">
  11.     </audio>
  12.  
  13.     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  14.     <script type="text/javascript">
  15.         $(function () {
  16.             //js获取某个mp3音频文件的播放时长
  17.             getAudioDuration('http://mp3.9ku.com/hot/2005/05-19/65937.mp3');
  18.  
  19.             duration();
  20.             console.log("转化为多少秒=》》", timeEvent("00:14:36"));
  21.         })
  22.  
  23.         // 音频加载完成后的一系列操作
  24.         function duration() {
  25.             var myVid = document.getElementById("videoDiv");
  26.             console.log("duration  ", myVid);
  27.             if (myVid != null) {
  28.                 var duration;
  29.                 myVid.load(); //方法重新加载音频/视频元素
  30.                 // https://www.w3school.com.cn/tags/av_prop_currenttime.asp
  31.                 // currentTime 属性设置或返回音频/视频播放的当前位置（以秒计）。
  32.                 // 当设置该属性时，播放会跳跃到指定的位置。
  33.                 myVid.currentTime = 20; //默认指定音频默认从20s的时候开始播放（默认时间为s）
  34.                 myVid.oncanplay = function () {
  35.                     //duration 属性返回当前音频的长度，以秒计。
  36.                     console.log("音频时间", myVid.duration);
  37.                     console.log("时分秒格式转化：", timeToMinute(myVid.duration))
  38.                 }
  39.             }
  40.         }
  41.  
  42.         function getAudioDuration(src) {
  43.             let audio = document.createElement('audio') //生成一个audio元素 
  44.             audio.src = src //音乐的路径 
  45.             audio.addEventListener("canplay", function () {
  46.                 console.log("音频长度=>>>：", parseInt(audio.duration) + '秒', '音频时分秒格式：', timeToMinute(parseInt(audio
  47.                     .duration)));
  48.             });
  49.         }
  50.  
  51.         // 秒转换时分钟00:00:00格式
  52.         function timeToMinute(times) {
  53.             var t;
  54.             if (times > -1) {
  55.                 var hour = Math.floor(times / 3600);
  56.                 var min = Math.floor(times / 60) % 60;
  57.                 var sec = times % 60;
  58.                 if (hour < 10) {
  59.                     t = '0' + hour + ":";
  60.                 } else {
  61.                     t = hour + ":";
  62.                 }
  63.  
  64.                 if (min < 10) {
  65.                     t += "0";
  66.                 }
  67.                 t += min + ":";
  68.                 if (sec < 10) {
  69.                     t += "0";
  70.                 }
  71.                 t += sec.toFixed(2);
  72.             }
  73.             t = t.substring(0, t.length - 3);
  74.             return t;
  75.         }
  76.  
  77.         // 00:00:00时分秒格式转化为秒
  78.         function timeEvent(e) {
  79.             let time = e;
  80.             var len = time.split(':');
  81.             if (len.length == 3) {
  82.                 var hour = time.split(':')[0];
  83.                 var min = time.split(':')[1];
  84.                 var sec = time.split(':')[2];
  85.                 return Number(hour * 3600) + Number(min * 60) + Number(sec);
  86.             }
  87.             if (len.length == 2) {
  88.                 var min = time.split(':')[0];
  89.                 var sec = time.split(':')[1];
  90.                 return Number(min * 60) + Number(sec);
  91.             }
  92.             if (len.length == 1) {
  93.                 var sec = time.split(':')[0];
  94.                 return Number(sec);
  95.             }
  96.         }
  97.     </script>
  98. </body>
  99.  
  100. </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

js 获取audio时长，并且转换为分钟00:00:00格式_js获取音频长度如何转化分钟-CSDN博客

HTML Audio/Video DOM currentTime 属性

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/685110
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号