使用“ Web Audio API”和“ AudioContext”使用JavaScript獲取MP3文件的持續時間

Question

有什么方法可以使用Web Audio API和AudioContext使用JavaScript獲取MP3文件的持續時間嗎？

我可以使用HTML5元素獲得該持續時間： <audio/>但是我想使用Web Audio API 。

下面是我到目前為止的代碼。 如果您有任何建議，請將我的代碼添加到： CodePen.io並發布鏈接。

CodePen.io代碼： https : CodePen.io

 window.addEventListener('load', () => { const URL = 'https://www.tophtml.com/snl/15.mp3'; let url = URL + '?nocache='+(new Date()).getTime(); let audio = document.querySelector('audio'); audio.setAttribute('src', url); audio.addEventListener('durationchange', function() { log('way 1: ' + this.duration); }); getAudioDurationWithAudioContext().then((duration) => { log('way 2: ' + duration); }); log('...'); }); function getAudioDurationWithAudioContext() { // PLEASE, IMPLEMENT THIS FUNCTION AND "FORK" THIS CODE return new Promise((resolve, reject) => { setTimeout(() => { resolve('???.???'); }, 1000); }); } function log(text, append = true) { let logger = document.querySelector('.logger'); if (text == '') { logger.innerHTML = ''; return; } if (!append) logger.innerHTML = ''; let entry = document.createElement('div'); entry.innerHTML = text; logger.appendChild(entry); } 

 .logger { display: inline-block; font-family: monospace; white-space: pre; font-size: 13px; margin-top: 10px; background-color: #d4e4ff; } .logger { padding: 4px; } .divider { border-top: 1px solid #ccc; margin: 10px 0; } 

 <div> <audio controls preload="auto"></audio> </div> <div class="logger"></div> 

謝謝！

Answer 1

獲得AudioBuffer后，它就會具有duration屬性。 這是一個以秒為單位的持續時間的雙精度形式。

Answer 2

是的，可以在沒有音頻標簽的情況下執行此操作。 您需要使用Ajax / XMLHttpRequest下載音頻文件並對文件進行解碼，如下所示：

// Step 1: We need AudioContext instance to decode audio files.
var context = new AudioContext();


// Step 2: Download a .mp3 file using AJAX
var request = new XMLHttpRequest();
request.addEventListener('load', fileLoaded);
request.open('GET', 'https://www.tophtml.com/snl/15.mp3');
request.responseType = 'arraybuffer';
request.send();


// Step 3: File downloaded, need to be decoded now.
function fileLoaded() {
    if (request.status < 400)
        context.decodeAudioData(request.response, fileDecoded);
}


// Step 4: File decoded, we can get the duration.
function fileDecoded(audioBuffer) {

    // This is the duration you want, in seconds:
    audioBuffer.duration;

}