怎样获得html5的audio组件加载的MP3文件的总时长

Posted 2023-03-19

<audio controls="true" id="video1" >    
          <source src="music.mp3" />    
          <source src="music.ogg" />     
 </audio>
 <script>
myVid=document.getElementById("video1");
alert(myVid.duration);
 </script>

您仔细看下 他的标签介绍 会发现有一个 

duration    返回媒体的播放总时长，单位秒    

方法               方法描述
addTextTrack()    为音视频加入一个新的文本轨迹    
canPlayType()    检查指定的音视频格式是否得到支持    
load()    重新加载音视频标签    
play()    播放音视频    
pause()    暂停播放当前的音视频    
-------------------------
属性           属性描述
audioTracks    返回可用的音轨列表（MultipleTrackList对象）    
autoplay    媒体加载后自动播放    
buffered    返回缓冲部件的时间范围(TimeRanges对象)    
controller    返回当前的媒体控制器（MediaController对象）    
controls    显示播控控件    
crossOrigin    CORS设置    
currentSrc    返回当前媒体的URL    
currentTime    当前播放的时间，单位秒    
defaultMuted    缺省是否静音    
defaultPlaybackRate    播控的缺省倍速    
duration    返回媒体的播放总时长，单位秒    
ended    返回当前播放是否结束标志    
error    返回当前播放的错误状态    
initialTime    返回初始播放的位置    
loop    是否循环播放    
mediaGroup    当前音视频所属媒体组 (用来链接多个音视频标签)    
muted    是否静音    
networkState    返回当前网络状态    
paused    是否暂停    
playbackRate    播放的倍速    
played    当前播放部件已经播放的时间范围(TimeRanges对象)    
preload    页面加载时是否同时加载音视频    
readyState    返回当前的准备状态    
seekable    返回当前可跳转部件的时间范围(TimeRanges对象)    
seeking    返回用户是否做了跳转操作    
src    当前音视频源的URL    
startOffsetTime    返回当前的时间偏移(Date对象)    
textTracks    返回可用的文本轨迹(TextTrackList对象)    
videoTracks    返回可用的视频轨迹(VideoTrackList对象)    
volume    音量值    
事件
事件描述
abort    当音视频加载被异常终止时产生该事件    
canplay    当浏览器可以开始播放该音视频时产生该事件    
canplaythrough    当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件    
durationchange    当媒体的总时长改变时产生该事件    
emptied    当前播放列表为空时产生该事件    
ended    当前播放列表结束时产生该事件    
error    当加载媒体发生错误时产生该事件    
loadeddata    当加载媒体数据时产生该事件    
loadedmetadata    当收到总时长，分辨率和字轨等metadata时产生该事件    
loadstart    当开始查找媒体数据时产生该事件    
pause    当媒体暂停时产生该事件    
play    当媒体播放时产生该事件    
playing    当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件    
progress    当获取到媒体数据时产生该事件    
ratechange    当播放倍数改变时产生该事件    
seeked    当用户完成跳转时产生该事件    
seeking    当用户正执行跳转时操作的时候产生该事件    
stalled    当试图获取媒体数据，但数据还不可用时产生该事件    
suspend    当获取不到数据时产生该事件    
timeupdate    当前播放位置发生改变时产生该事件    
volumechange    当前音量发生改变时产生该事件    
waiting    当视频因缓冲下一帧而停止时产生该事件

参考技术A <audio controls="true" id="video1" >
<source src="music.mp3" />
<source src="music.ogg" />
</audio>
<script>
myVid=document.getElementById("video1");
alert(myVid.duration);
</script>

duration 返回媒体的播放总时长，单位秒

如何获得 html5 音频持续时间

【中文标题】如何获得 html5 音频持续时间

【英文标题】：How can I get the html5 audio's duration time

【发布时间】：2012-06-27 13:27:30

【问题描述】：

我在页面中有一个 html5 <audio> 标签，但我怎么知道它的持续时间？

<audio controls="">
    <source src="p4.2.mp3">
</audio>

【参考方案1】：

2020 年解决方案：

当尚未加载音频元数据时，您将收到 undefined 或 NaN（不是数字）。因此有人建议使用onloadedmetadata 来确保首先获取音频文件的元数据。此外，大多数人没有提到的是，您必须使用[0] 来定位音频 DOM 元素的第一个索引，如下所示：

-- 原版 Javascript：

var audio = document.getElementById('audio-1');
audio.onloadedmetadata = function() 
  alert(audio.duration);
;

如果这不起作用，试试这个，但不太可靠并且依赖于用户连接：

setTimeout(function () 
    var audio = document.getElementById('audio-1');
    console.log("audio", audio.duration);
, 100);

-- jQuery:

$(document).ready(function() 
   var audio = $("#audio-1")[0];
   $("#audio-1").on("loadedmetadata", function() 
       alert(audio.duration);
   ); 
);

【讨论】：

从什么时候开始"$("#audio-1")[0];"香草Javascript？您的两个示例都是 jQuery 示例-不确定您是否理解其中的区别。原版将是“document.getElementById('audio-1');”而是在这里。

@RichardEdwards 感谢您指出这一点。在我完全切换到 Vanilla JS 之前，我在写这个答案时主要使用 JQuery，并没有注意到这个错字。

【参考方案2】：

var au = document.createElement('audio');
au.addEventListener('loadedmetadata',function()
    au.setAttribute('data-time',au.duration);
,false);

【参考方案3】：

在上面的评论中，提到解决方案是将事件句柄绑定到事件加载元数据。我就是这样做的——

audio.onloadedmetadata = function() 
  alert(audio.duration);
;

【参考方案4】：

我一直在努力在 React 组件中加载持续时间，因此遵循 @AlexioVay 的解决方案，如果您使用的是 React，这里是一个答案：

这假设您将 ref 用于您的音频组件类，您需要将 audio 元素作为播放/暂停处理程序的目标。

<audio /> 元素：

<audio ref=audio =>  this.audio = audio  src=this.props.src preload="auto" />

然后在您的componentDidMount() 中：

componentDidMount() 

    const audio = this.audio

    audio.onloadedmetadata = () => 
        console.log(audio.duration)
        this.setState(
           duration: this.formatTime(audio.duration.toFixed(0))
        )
    

最后是formatTime() 函数：

formatTime(seconds) 
    const h = Math.floor(seconds / 3600)
    const m = Math.floor((seconds % 3600) / 60)
    const s = seconds % 60
    return [h, m > 9 ? m : h ? '0' + m : m || '0', s > 9 ? s : '0' + s]
        .filter(a => a)
        .join(':')

这样，h:mm:ss 格式的持续时间将在音频 src 数据加载后立即显示。甜蜜。

【讨论】：

感谢您提及我。你能提供你的 React hooks 解决方案吗？

【参考方案5】：

我使用“canplaythrough”事件来获取曲目时长。我有一个案例，我有两个玩家，我想在第一个玩家完成前 2 秒停止第二个玩家。

$('#' + _currentPlayerID).on("canplaythrough", function (e)    
    var seconds = e.currentTarget.duration;    
    var trackmills = seconds * 1000;
    var subTimeout = trackmills - 2000; //2 seconds before end

    //console.log('seconds ' + seconds);
    //console.log('trackmills ' + trackmills);
    //console.log('subTimeout ' + subTimeout);

    //Stop playing before the end of thet track
    //clear this event in the Pause Event
    _player2TimeoutEvent = setTimeout(function ()  pausePlayer2(); , subTimeout);

);

【参考方案6】：

只需使用audioElement.duration

【讨论】：

不行，不行，我试过了：var audio = $('#audio')[0]; console.log('audio', audio.duration);，结果是NaN

这给出了正确的持续时间（在 Firefox 中测试），但只有在加载元数据事件发生之后。

当您使用 setTimeout(function () ... , 10); 而不是立即执行它时似乎可以工作。

@AlexioVay 关于超时是正确的，文件需要有时间加载才能测试

【参考方案7】：

要获得阅读的结束，有必要在事件“onended”的情况下使用“loop = false”。如果 loop = true，onended 不起作用；)

要制作播放列表，您必须设置 loop = false 以使用 'onended' 事件来播放下一首歌曲。

如果您的脚本正确完成，您可以在任何地方恢复持续时间。如果 'duration' 的值为 NaN，则浏览器找不到该文件。如果值为'Infinity' 'INF' 它是一个流，在这种情况下，与读取时间'currentime'相比增加了1 mn。 对于* I.E，这是废话。当前时间可能大于持续时间，在这种情况下，您可以： var 持续时间 = (this.currentime> this.duration)? this.currenttime: this.duration;

那是（O_°）

【参考方案8】：

最好这样使用事件...

ObjectAudio.onprogress  =function()
    if(this.buffered.length)
    var itimeend = (this.buffered.length>1)? this.buffered.end(this.buffered.length-1):this.buffered.end(0);
    ....
        Your code here.......