Скачать или смотреть Get the Duration of an MP3 File in JavaScript

Learn how to obtain the duration of an audio file in JavaScript, whether it is from a local file or a URL. Follow our simple step-by-step guide.
---
This video is based on the question https://stackoverflow.com/q/71118040/ asked by the user 'yksi' ( https://stackoverflow.com/u/15376029/ ) and on the answer https://stackoverflow.com/a/71118143/ provided by the user 'Gianfabio Pezzolla' ( https://stackoverflow.com/u/18010120/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Getting the duration of an mp3 file in a variable

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Get the Duration of an MP3 File in JavaScript

When working with audio files in JavaScript, a common goal is to retrieve the duration of the audio track. However, if you’ve tried this only to find that it returns NaN, you’re not alone. Many developers struggle with this issue, especially if they are unsure how to properly load the audio file's metadata. In this guide, we’ll explore how to efficiently get the duration of an MP3 file, whether it's uploaded via a file input or sourced from a URL. Let’s dive in!

Understanding the Problem

The main challenge is that directly trying to access the audio.duration property can often return NaN if the audio metadata hasn’t been fully loaded. For example, if you try to retrieve the duration immediately after instantiating the audio object, before the file has loaded, you will receive NaN. This is because the duration can only be accessed once the metadata is ready.

Here’s a basic structure of the issue:

[[See Video to Reveal this Text or Code Snippet]]

Step-by-Step Solution

To get around this problem, follow the structured steps below. We'll break this down for both local file uploads and URL audio files.

Setting up the File Input

First, let’s create an input field for the user to load their audio files.

[[See Video to Reveal this Text or Code Snippet]]

1. Retrieving Duration from a Local File

If you're trying to get the duration of a locally uploaded audio file, here's how you can do it:

1.1 Create the Audio Element

Create an instance of the <audio> element to manipulate the audio.

[[See Video to Reveal this Text or Code Snippet]]

1.2 Add Event Listener to File Input

Now, add an event listener to handle the file input changes:

[[See Video to Reveal this Text or Code Snippet]]

2. Retrieving Duration from a URL

If your audio file is hosted online, you can access it using an XMLHttpRequest, followed by decoding the audio data.

2.1 Define Your MP3 URL

Start by defining the URL of your audio file:

[[See Video to Reveal this Text or Code Snippet]]

2.2 Set Up Audio Context and Fetch the File

Next, create an AudioContext and make an HTTP request to load the audio.

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

With these steps, you should now be able to retrieve the duration of an MP3 file, whether it’s a local file uploaded by the user or hosted online. Remember, the key is to ensure that you only access the duration after the audio metadata has been fully loaded. By understanding how JavaScript interacts with audio files, you can create more dynamic and engaging web applications. Have fun coding!