使用“Web Audio API”和“AudioContext”获取带有 JavaScript 的 MP3 文件的持续时间答案

【问题标题】：Getting the duration of an MP3 file with JavaScript using "Web Audio API" and "AudioContext"使用“Web Audio API”和“AudioContext”获取带有 JavaScript 的 MP3 文件的持续时间
【发布时间】：2018-09-29 02:32:38
【问题描述】：

有什么方法可以使用Web Audio API 和AudioContext 来获取MP3 和JavaScript 文件的持续时间？

我可以使用 HTML5 元素获得该持续时间：<audio/> 但我想使用 Web Audio API。

下面是我到目前为止的代码。如果您有任何建议，请将我的代码 fork 到：CodePen.io 并发布链接。

CodePen.io 代码：https://codepen.io/anon/pen/QZwyqd

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>

谢谢！

【问题讨论】：

我不确定是否可以在没有音频标签的情况下使用AudioContext。因此，即使可以使用AudioContext 获得持续时间，您最终仍将使用音频标签

标签： javascript html web-audio-api audiocontext

【解决方案1】：

是的，可以在没有音频标签的情况下执行此操作。您需要使用 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;

}

【讨论】：

您也可以从加载到输入字段 (type="file") 的文件中执行此操作。

【解决方案2】：

一旦你得到了你的AudioBuffer，它就有了一个持续时间属性。这是一个以秒为单位表示持续时间的双精度值。

【讨论】：