脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript获取音视频时长

JavaScript实现获取指定音视频流链接的时长

 更新时间：2026年02月06日 09:18:12   作者：博客zhu虎康  
这篇文章主要为大家详细介绍了JavaScript实现获取指定音频或视频流链接的时长,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

需求

在上传音视频后，后端会返回一个视频地址，如何根据该地址获取音视频的时长

思路分析

视频

利用浏览器的 HTMLVideoElement 对象加载视频的元数据（无需下载完整视频），从而获取精准的时长（秒数）

1.思路

/**
 * 获取远程视频的时长（单位：秒）
 * @param {string} videoUrl - 视频链接
 * @returns {Promise<number>} 视频时长（秒，保留两位小数）
 */
async function getVideoDurationInSeconds(videoUrl) {
  return new Promise((resolve, reject) => {
    // 创建 video 元素（无需添加到 DOM）
    const video = document.createElement('video');
    
    // 关键：设置跨域配置（若视频服务器允许跨域，需添加此属性）
    video.crossOrigin = 'anonymous'; // 或 'use-credentials'（根据服务器配置）

    // 监听元数据加载完成事件（此时已能获取时长）
    video.onloadedmetadata = () => {
      // video.duration 是视频总时长（单位：秒，可能是小数，如 120.5 秒）
      const duration = Number(video.duration.toFixed(2)); // 保留两位小数
      // 释放资源
      video.removeAttribute('src');
      video.load();
      URL.revokeObjectURL(video.src); // 清理临时 URL
      resolve(duration);
    };

    // 监听错误事件（如跨域、地址无效、格式不支持）
    video.onerror = (err) => {
      reject(new Error(`获取视频时长失败：${video.error?.code || '未知错误'}`));
      // 释放资源
      video.removeAttribute('src');
      video.load();
      URL.revokeObjectURL(video.src);
    };

    // 监听加载超时（可选，防止长时间无响应）
    setTimeout(() => {
      reject(new Error('获取视频时长超时'));
    }, 10000); // 10秒超时

    // 设置视频地址，触发元数据加载
    video.src = videoUrl;
    // 强制加载元数据（部分浏览器需要）
    video.load();
  });
}

// 调用示例
const videoUrl = "https://www.dkifly.com/ifly-api/admin-api/infra/file/29/get/20251212/bbb4cc64216dac72124369fd35b7ae00_1765533865580.mp4";
getVideoDurationInSeconds(videoUrl)
  .then(duration => {
    console.log('视频时长（秒）：', duration); // 输出示例：125.36
  })
  .catch(error => {
    console.error(error.message);
  });

2.总代码

<template>
  <div>
    <el-button @click="fetchVideoDuration">获取视频时长</el-button>
    <div v-if="duration !== null">视频时长（秒）：{{ duration }}</div>
    <div v-if="errorMsg">错误：{{ errorMsg }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const duration = ref<number | null>(null);
const errorMsg = ref('');

/**
 * 获取远程视频的时长（单位：秒）
 * @param {string} videoUrl - 视频链接
 * @returns {Promise<number>} 视频时长（秒）
 */
const getVideoDurationInSeconds = async (videoUrl: string): Promise<number> => {
  return new Promise((resolve, reject) => {
    const video = document.createElement('video');
    video.crossOrigin = 'anonymous';

    video.onloadedmetadata = () => {
      const duration = Number(video.duration.toFixed(2));
      video.removeAttribute('src');
      video.load();
      URL.revokeObjectURL(video.src);
      resolve(duration);
    };

    video.onerror = () => {
      reject(new Error('视频加载失败，可能是跨域或链接无效'));
      video.removeAttribute('src');
      video.load();
      URL.revokeObjectURL(video.src);
    };

    // 10秒超时
    setTimeout(() => {
      reject(new Error('获取时长超时，请检查视频链接'));
    }, 10000);

    video.src = videoUrl;
    video.load();
  });
};

// 触发获取时长
const fetchVideoDuration = async () => {
  const videoUrl = "https://www.dkifly.com/ifly-api/admin-api/infra/file/29/get/20251212/bbb4cc64216dac72124369fd35b7ae00_1765533865580.mp4";
  try {
    duration.value = await getVideoDurationInSeconds(videoUrl);
    errorMsg.value = '';
  } catch (err) {
    duration.value = null;
    errorMsg.value = (err as Error).message;
  }
};
</script>

音频

方式一

核心逻辑和视频是一样的

1.思路

/**
 * 获取远程音频/视频的时长（单位：秒，适配 MP3/MP4 等格式）
 * @param {string} mediaUrl - 音频/视频链接（MP3/MP4 均可）
 * @returns {Promise<number>} 时长（秒，保留两位小数）
 */
async function getMediaDurationInSeconds(mediaUrl) {
  return new Promise((resolve, reject) => {
    // 针对音频，使用 audio 元素（语义化，性能更优）
    const media = document.createElement('audio'); // 替换为 audio 元素
    // 跨域配置（关键：需服务器支持 CORS）
    media.crossOrigin = 'anonymous';

    // 元数据加载完成：获取时长
    media.onloadedmetadata = () => {
      if (isNaN(media.duration)) {
        reject(new Error('无法获取媒体时长，可能是文件格式不支持或元数据缺失'));
        return;
      }
      // 转换为秒（保留两位小数）
      const duration = Number(media.duration.toFixed(2));
      // 释放资源，避免内存泄漏
      media.removeAttribute('src');
      media.load();
      URL.revokeObjectURL(media.src);
      resolve(duration);
    };

    // 错误处理（跨域、链接无效、格式不支持等）
    media.onerror = (err) => {
      reject(new Error(`获取时长失败：${media.error?.message || '未知错误'}`));
      media.removeAttribute('src');
      media.load();
      URL.revokeObjectURL(media.src);
    };

    // 超时处理（防止长时间无响应）
    setTimeout(() => {
      reject(new Error('获取时长超时（10秒）'));
    }, 10000);

    // 设置媒体地址，触发加载
    media.src = mediaUrl;
    media.load();
  });
}

// 调用示例：音频链接（MP3）
const audioUrl = "https://www.dkifly.com/ifly-api/admin-api/infra/file/29/get/20251212/bbb4cc64216dac72124369fd35b7ae00_1765533865580.mp3";
getMediaDurationInSeconds(audioUrl)
  .then(duration => {
    console.log('音频时长（秒）：', duration); // 输出示例：120.56
  })
  .catch(error => {
    console.error(error.message);
  });

// 调用示例：视频链接（MP4）（该函数也兼容视频）
const videoUrl = "https://www.dkifly.com/ifly-api/admin-api/infra/file/29/get/20251212/bbb4cc64216dac72124369fd35b7ae00_1765533865580.mp4";
getMediaDurationInSeconds(videoUrl)
  .then(duration => {
    console.log('视频时长（秒）：', duration);
  })
  .catch(error => {
    console.error(error.message);
  });

2.总代码

<template>
  <div>
    <el-button @click="fetchAudioDuration">获取音频时长</el-button>
    <div v-if="duration !== null">音频时长（秒）：{{ duration }}</div>
    <div v-if="errorMsg" style="color: red;">{{ errorMsg }}</div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const duration = ref<number | null>(null);
const errorMsg = ref('');

/**
 * 通用方法：获取音频/视频时长（秒）
 */
const getMediaDurationInSeconds = async (mediaUrl: string): Promise<number> => {
  return new Promise((resolve, reject) => {
    const media = document.createElement('audio');
    media.crossOrigin = 'anonymous';

    media.onloadedmetadata = () => {
      if (isNaN(media.duration)) {
        reject(new Error('媒体文件元数据缺失，无法获取时长'));
        return;
      }
      const duration = Number(media.duration.toFixed(2));
      media.removeAttribute('src');
      media.load();
      URL.revokeObjectURL(media.src);
      resolve(duration);
    };

    media.onerror = () => {
      reject(new Error('加载失败：可能是跨域、链接无效或格式不支持'));
      media.removeAttribute('src');
      media.load();
      URL.revokeObjectURL(media.src);
    };

    setTimeout(() => {
      reject(new Error('获取时长超时，请检查链接'));
    }, 10000);

    media.src = mediaUrl;
    media.load();
  });
};

// 触发获取音频时长
const fetchAudioDuration = async () => {
  const audioUrl = "https://www.dkifly.com/ifly-api/admin-api/infra/file/29/get/20251212/bbb4cc64216dac72124369fd35b7ae00_1765533865580.mp3";
  try {
    duration.value = await getMediaDurationInSeconds(audioUrl);
    errorMsg.value = '';
  } catch (err) {
    duration.value = null;
    errorMsg.value = (err as Error).message;
  }
};
</script>

方式二

async function getAudioDuration(url) {
  return new Promise((resolve, reject) => {
    const audio = new Audio(url)

    audio.addEventListener('loadedmetadata', () => {
      console.log(audio.duration)
      // 返回四舍五入后的秒数
      resolve(Math.round(audio.duration))
    })

    audio.addEventListener('error', (e) => {
      reject(new Error('Failed to load audio file'))
    })
  })
}
// 使用
try {
   const duration = await getAudioDuration('https://example.com/audio.mp3');
   console.log(`音频时长: ${duration} 秒`)
 } catch (error) {
   console.error('获取音频时长失败:', error.message)
}

获取时分秒

async function getFormattedDuration(url) {
  const duration = await getAudioDuration(url);
  const minutes = Math.floor(duration / 60);
  const seconds = duration % 60;
  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}

// 使用示例
const formattedDuration = await getFormattedDuration('https://example.com/audio.mp3');
console.log(`音频时长: ${formattedDuration}`); // 输出格式如: "3:45"

到此这篇关于JavaScript实现获取指定音视频流链接的时长的文章就介绍到这了,更多相关JavaScript获取音视频时长内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 两种方法实现文本框输入内容提示消失

    两种方法实现文本框输入内容提示消失

    第一种方法:基于HTML5 input标签的新特性 - placeholder 。另外，x-webkit-speech 属性可以实现语音输入功能;第二种方法： 用span模拟，定位span，借助JS键盘事件判断输入，确定span里的内容显示隐藏
    2013-03-03
  • 移动端网页开发调试神器Eruda的介绍与使用技巧

    移动端网页开发调试神器Eruda的介绍与使用技巧

    在日常的移动端开发时，一般都是试用chrome浏览器的移动端模式进行开发和调试，只有在chrome调试完成，而最近发现了一个新的调试方法，所以这篇文章主要给大家介绍了关于移动端网页开发调试神器Eruda的基本资料，以及其使用的一些技巧，需要的朋友可以参考下。
    2017-10-10
  • JavaScript变量基本使用方法实例分析

    JavaScript变量基本使用方法实例分析

    这篇文章主要介绍了JavaScript变量基本使用方法,结合实例形式分析了JavaScript变量的类型、使用注意事项及命名规范,需要的朋友可以参考下
    2019-11-11
  • 微信小程序实现手指触摸画板

    微信小程序实现手指触摸画板

    这篇文章主要为大家详细介绍了微信小程序实现手指触摸画板，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-07-07
  • 微信小程序使用audio组件播放音乐功能示例【附源码下载】

    微信小程序使用audio组件播放音乐功能示例【附源码下载】

    这篇文章主要介绍了微信小程序使用audio组件播放音乐功能,结合实例形式分析了微信小程序audio组件播放在线音乐相关操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下
    2017-12-12
  • bootstrapValidator 重新启用提交按钮的方法

    bootstrapValidator 重新启用提交按钮的方法

    bootstrapValidator 使用中，由于字段检查等原因，致使提交按钮失效。如何重新启用提交按钮呢？下面小编给大家介绍下bootstrapValidator 重新启用提交按钮的方法,需要的朋友可以参考下
    2017-02-02
  • 使用async await 封装 axios的方法

    使用async await 封装 axios的方法

    这篇文章主要介绍了使用async await 封装 axios的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 你不知道的前端console用法分享

    你不知道的前端console用法分享

    console一定是各位前端最熟悉的小伙伴了,有些网站还会在控制台输出一些有意思的东西,下面这篇文章主要给大家介绍了关于前端console用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-08-08
  • jquery pagination插件动态分页实例(Bootstrap分页)

    jquery pagination插件动态分页实例(Bootstrap分页)

    这篇文章主要为大家分享了Bootstrap静态分页和jquery pagination插件动态分页两个实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-12-12
  • JS正则表达式常见用法实例详解

    JS正则表达式常见用法实例详解

    这篇文章主要介绍了JS正则表达式常见用法,结合实例形式分析了javascript元字符、分组符、修饰符、量词基本含义,并结合具体案例形式分析了javascript正则基本使用技巧,需要的朋友可以参考下
    2018-06-06

最新评论