JavaScript實現(xiàn)獲取指定音視頻流鏈接的時長

更新時間：2026年02月06日 09:18:12 作者：博客zhu虎康

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)獲取指定音頻或視頻流鏈接的時長,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

需求

在上傳音視頻后，后端會返回一個視頻地址，如何根據(jù)該地址獲取音視頻的時長

思路分析

視頻

利用瀏覽器的 HTMLVideoElement 對象加載視頻的元數(shù)據(jù)（無需下載完整視頻），從而獲取精準(zhǔn)的時長（秒數(shù)）

1.思路

/**
 * 獲取遠程視頻的時長（單位：秒）
 * @param {string} videoUrl - 視頻鏈接
 * @returns {Promise<number>} 視頻時長（秒，保留兩位小數(shù)）
 */
async function getVideoDurationInSeconds(videoUrl) {
  return new Promise((resolve, reject) => {
    // 創(chuàng)建 video 元素（無需添加到 DOM）
    const video = document.createElement('video');
    
    // 關(guān)鍵：設(shè)置跨域配置（若視頻服務(wù)器允許跨域，需添加此屬性）
    video.crossOrigin = 'anonymous'; // 或 'use-credentials'（根據(jù)服務(wù)器配置）

    // 監(jiān)聽元數(shù)據(jù)加載完成事件（此時已能獲取時長）
    video.onloadedmetadata = () => {
      // video.duration 是視頻總時長（單位：秒，可能是小數(shù)，如 120.5 秒）
      const duration = Number(video.duration.toFixed(2)); // 保留兩位小數(shù)
      // 釋放資源
      video.removeAttribute('src');
      video.load();
      URL.revokeObjectURL(video.src); // 清理臨時 URL
      resolve(duration);
    };

    // 監(jiān)聽錯誤事件（如跨域、地址無效、格式不支持）
    video.onerror = (err) => {
      reject(new Error(`獲取視頻時長失?。?{video.error?.code || '未知錯誤'}`));
      // 釋放資源
      video.removeAttribute('src');
      video.load();
      URL.revokeObjectURL(video.src);
    };

    // 監(jiān)聽加載超時（可選，防止長時間無響應(yīng)）
    setTimeout(() => {
      reject(new Error('獲取視頻時長超時'));
    }, 10000); // 10秒超時

    // 設(shè)置視頻地址，觸發(fā)元數(shù)據(jù)加載
    video.src = videoUrl;
    // 強制加載元數(shù)據(jù)（部分瀏覽器需要）
    video.load();
  });
}

// 調(diào)用示例
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();
  });
};

// 觸發(fā)獲取時長
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>} 時長（秒，保留兩位小數(shù)）
 */
async function getMediaDurationInSeconds(mediaUrl) {
  return new Promise((resolve, reject) => {
    // 針對音頻，使用 audio 元素（語義化，性能更優(yōu)）
    const media = document.createElement('audio'); // 替換為 audio 元素
    // 跨域配置（關(guān)鍵：需服務(wù)器支持 CORS）
    media.crossOrigin = 'anonymous';

    // 元數(shù)據(jù)加載完成：獲取時長
    media.onloadedmetadata = () => {
      if (isNaN(media.duration)) {
        reject(new Error('無法獲取媒體時長，可能是文件格式不支持或元數(shù)據(jù)缺失'));
        return;
      }
      // 轉(zhuǎn)換為秒（保留兩位小數(shù)）
      const duration = Number(media.duration.toFixed(2));
      // 釋放資源，避免內(nèi)存泄漏
      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);
    };

    // 超時處理（防止長時間無響應(yīng)）
    setTimeout(() => {
      reject(new Error('獲取時長超時（10秒）'));
    }, 10000);

    // 設(shè)置媒體地址，觸發(fā)加載
    media.src = mediaUrl;
    media.load();
  });
}

// 調(diào)用示例：音頻鏈接（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);
  });

// 調(diào)用示例：視頻鏈接（MP4）（該函數(shù)也兼容視頻）
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('媒體文件元數(shù)據(jù)缺失，無法獲取時長'));
        return;
      }
      const duration = Number(media.duration.toFixed(2));
      media.removeAttribute('src');
      media.load();
      URL.revokeObjectURL(media.src);
      resolve(duration);
    };

    media.onerror = () => {
      reject(new Error('加載失?。嚎赡苁强缬颉㈡溄訜o效或格式不支持'));
      media.removeAttribute('src');
      media.load();
      URL.revokeObjectURL(media.src);
    };

    setTimeout(() => {
      reject(new Error('獲取時長超時，請檢查鏈接'));
    }, 10000);

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

// 觸發(fā)獲取音頻時長
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)
      // 返回四舍五入后的秒數(shù)
      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"

到此這篇關(guān)于JavaScript實現(xiàn)獲取指定音視頻流鏈接的時長的文章就介紹到這了,更多相關(guān)JavaScript獲取音視頻時長內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: