JavaScript实现获取指定音视频流链接的时长
作者：博客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获取音视频时长内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！