Получение длительности файла MP3 с использованием JavaScript с помощью «Web Audio API» и «AudioContext»

Question

Есть ли способ получить длительность файла MP3 с JavaScript, используя Web Audio API и AudioContext?

Я могу получить эту длительность с помощью элемента HTML5: <audio/> но я хочу использовать Web Audio API.

Ниже приведен код, который у меня есть.Если у вас есть предложения, пожалуйста, напишите мой код: 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>

Спасибо!

Answer 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;

}

Answer 2

Как только вы получите AudioBuffer , он имеет свойство длительности.Это двойное значение, представляющее продолжительность в секундах.