根据url获取视频或音频时长

根据url获取音频/视频文件的时长，原理是通过创建一个隐藏的音频元素，加载指定链接的媒体文件。当浏览器获取到文件的基本信息后，会在得到视频/音频的时长，以秒为单位。

// 封装为 Promise 的获取时长函数
const getMediaDuration = async (url, isVideo = false) => {
    // 根据类型创建对应元素
    const mediaElement = isVideo
        ? document.createElement('video')
        : new Audio();

    return new Promise((resolve, reject) => {
        // 成功加载元数据
        const handleLoaded = () => {
            resolve(Math.floor(mediaElement.duration));
        };

        // 错误处理
        const handleError = (error) => {
            reject(new Error(`加载失败: ${error.message}`));
        };

        // 清理事件监听
        const cleanup = () => {
            mediaElement.removeEventListener('loadedmetadata', handleLoaded);
            mediaElement.removeEventListener('error', handleError);
            mediaElement.src = ''; // 释放资源
        };

        // 先清理事件监听
        cleanup();

        // 绑定事件
        mediaElement.addEventListener('loadedmetadata', handleLoaded);
        mediaElement.addEventListener('error', handleError);

        // 开始加载
        mediaElement.src = url;
        if (isVideo) {
            mediaElement.preload = 'metadata';
        }

    });
};

// 调用
const getTime = async () => {
    // 使用示例
    try {
        const url = "你的音频/视频的url链接";
        const duration = await getMediaDuration(url, true);
        console.log(`媒体文件时长：${duration}秒`);

        // 这里可以安全地使用 duration 进行后续操作
    } catch (error) {
        console.error(error);
        // 显示用户友好的错误提示
    }
}
getTime()

使用场景：
1、需要获取音视频文件时长的功能模块
2、上传文件时的时长验证
3、多媒体播放器的初始化阶段
4、需要显示媒体时长基本信息