Why we(I) need this?

Sometimes when we use Aplayer to play some fancy music on our website, we might want to show the information of the running track (name, lrc, album, author), and more important, the cover(img) of the album. Of course we can input those info mannually, but what if we have a long playlist? Then we need some parser to get the metadata of music-file (mp3, flac, ...) automatically and decently

music-metadata-browser

music-metadata-browser is a metadata parser, supporting virtual any audio format and tag header around.
music-metadata-browser is a node module, designed for modern browser applications. Because modules don't run directly in the browser you need a module bundler, like Webpack or Parcel. The module bundler turns the modules (dependencies), together with you application code, into a static asset (typically a minified JavaScript file). The output of module bundler is compatible and optimized for execution by a web browser.

Integration with React or Angular should not be a problem:
+ example project using React framework
+ example project using Angular framework
+ If you prefer to parse files or streams server (node.js) side, you should use music-metadata instead.

Installation

You can install it via npm:

npm install music-metadata-browser

or via yarn:

yarn add music-metadata-browser

Usage

1. test examples

const mm = require('music-metadata');                                                                                                                                                                                                         
const util = require('util');
(async () => {
const {common} = await mm.parseFile('./Believe-in-you.mp3');
const cover = mm.selectCover(common.picture); // pick the cover image
console.log(cover);
}
)();

async function test1(){
const {common} = await mm.parseFile('./Believe-in-you.mp3');
const cover = mm.selectCover(common.picture); // pick the cover image
console.log(cover);
}

async function test1(){
  try {
    const metadata =  await mm.parseFile('./Believe-in-you.mp3');
    //console.log(util.inspect(metadata.common.title, { showHidden: false, depth: null }));
    //return util.inspect(metadata.common.title, { showHidden: true, depth: null });
    //console.log(metadata.common.title);
    return metadata.common.title;
  } catch (error) {
    console.error(error.message);
  }
}
(test1().then(function(name_x){console.log(name_x)}));
const getAs = async () => {
    const metadata = await mm.parseFile('./Believe-in-you.mp3');
    const doc = await new Promise((resolve) => {
        util.inspect(metadata.common.titile, {showHidden: false, depth:null});
    });
    return doc;
};
console.log(getAs()
    .then((result) => {
        console.log(`then:${result}`);
    }));

Using browserify to fix the require problem in frontend

Browserify recursively analyzes all the require() calls in your app in order to build a bundle you can serve up to the browser in a single