JavaScript Extract metadata of an audio or video file

To extract metadata from audio or video files in JavaScript, you can use several libraries and methods, depending on the type of metadata you need (e.g., duration, bitrate, codec, etc.). Below are some of the common ways to extract metadata in both the browser and Node.js environments.

1. Extracting Metadata in the Browser

In the browser, you can use the HTMLMediaElement interface, which is part of the <audio> and <video> HTML tags, to extract basic metadata like duration, width, height, and more.

Example: Extracting metadata from an audio or video file in the browser

<input type="file" id="fileInput" />
<script>
  document.getElementById("fileInput").addEventListener("change", function(event) {
    const file = event.target.files[0];
    if (file) {
      const url = URL.createObjectURL(file);

      const mediaElement = document.createElement(file.type.startsWith('audio') ? 'audio' : 'video');
      mediaElement.src = url;

      mediaElement.addEventListener("loadedmetadata", function() {
        // For video files, extract width and height
        const duration = mediaElement.duration;  // Duration in seconds
        const width = mediaElement.videoWidth;
        const height = mediaElement.videoHeight;

        console.log("Duration:", duration);
        console.log("Width:", width);
        console.log("Height:", height);

        if (file.type.startsWith('audio')) {
          // If it's an audio file, extract additional properties like duration
          console.log("Audio Duration:", duration);
        }

        // Clean up the object URL
        URL.revokeObjectURL(url);
      });
    }
  });
</script>

Explanation:

1. loadedmetadata: This event is fired once the metadata (like duration, dimensions for video, and duration for audio) is loaded.
2. mediaElement.duration: The total length of the media (audio or video) in seconds.
3. mediaElement.videoWidth and mediaElement.videoHeight: These properties are for video files to get the resolution.
4. file.type.startsWith('audio'): Used to determine if the file is audio or video based on its MIME type.

2. Using ffmpeg.js for Advanced Metadata Extraction

If you need more detailed metadata, like codec information, bitrate, or more complex details, you can use ffmpeg.js, which is a JavaScript port of FFmpeg and provides comprehensive media processing capabilities.

Example: Extracting metadata with ffmpeg.js

You can use ffmpeg.js to get detailed metadata, including codec, format, bitrate, and more.

<input type="file" id="fileInput" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ffmpeg.js/0.10.0/ffmpeg.min.js"></script>
<script>
  document.getElementById("fileInput").addEventListener("change", function(event) {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = function() {
        const arrayBuffer = reader.result;
        const ffmpeg = createFFmpeg({ log: true });

        ffmpeg.load().then(() => {
          // Write the input file into ffmpeg.js virtual filesystem
          ffmpeg.FS("writeFile", file.name, new Uint8Array(arrayBuffer));

          // Run ffprobe to get detailed metadata
          ffmpeg.run("-i", file.name).then(() => {
            const metadata = ffmpeg.FS("readFile", file.name + ".ffprobe.json");
            const metadataStr = new TextDecoder().decode(metadata);
            const metadataJson = JSON.parse(metadataStr);

            // Display or process the metadata
            console.log("Metadata:", metadataJson);
          });
        });
      };
      reader.readAsArrayBuffer(file);
    }
  });
</script>

Explanation:

ffmpeg.js allows you to access detailed metadata (e.g., codec, bitrate, etc.) using FFmpeg commands, like -i, which can retrieve information about the file.

You can use ffprobe with ffmpeg.js to extract detailed metadata (using commands like -i for input info). In this example, we assume the ffprobe output is returned as a JSON object, which you can then parse and process.

3. Using the audio-metadata Library (Node.js)

If you're working in a Node.js environment, you can use a package like audio-metadata to extract metadata from audio files.

Installation: npm install audio-metadata

Example: Extracting Audio Metadata with audio-metadata

const fs = require("fs");
const path = require("path");
const { parseFile } = require("audio-metadata");

const filePath = path.join(__dirname, "example.mp3");

fs.readFile(filePath, (err, buffer) => {
  if (err) {
    console.error("Error reading file:", err);
    return;
  }

  const metadata = parseFile(buffer);

  // Display metadata
  console.log("Metadata:", metadata);
});

Explanation:

audio-metadata is used to read the metadata of audio files in Node.js.

The parseFile function reads the audio file and returns metadata, which can include bitrate, duration, sample rate, channels, etc.

4. Using mediainfo.js for Detailed Media Info (Node.js and Browser)

mediainfo.js is a wrapper for MediaInfo, a tool for extracting metadata from media files. This tool can give very detailed information about both audio and video files, including codec, bitrate, resolution, and more.

Installation: npm install mediainfo.js

Example: Extracting Metadata with mediainfo.js

const fs = require('fs');
const MediaInfo = require('mediainfo.js');

MediaInfo({ format: 'object' }).then(function (MediaInfo) {
  const filePath = 'example.mp4';
  fs.readFile(filePath, (err, buffer) => {
    if (err) throw err;
    
    MediaInfo.parseData(buffer).then(data => {
      console.log('File Metadata:', data);
    });
  });
});

Explanation:

mediainfo.js can parse a wide range of media files and provide detailed metadata.

It works both in Node.js and the browser, but may require specific handling for browser environments due to file reading limitations.

Conclusion

1. Basic Metadata: You can use the built-in HTMLMediaElement in the browser to extract basic metadata such as duration, width, and height.
2. Advanced Metadata: For more detailed metadata (e.g., codec, bitrate), you can use ffmpeg.js, mediainfo.js, or audio-metadata in Node.js.
3. Browser Support: ffmpeg.js and mediainfo.js can also be used in the browser for more complex metadata extraction, though they may require larger file handling and more processing time.

These methods will allow you to extract and process metadata for audio and video files effectively in JavaScript.