musixmatch-api-js

MusixMatch API JS

musixmatch-api-js is a JavaScript library that allows you to easily interact with the MusixMatch API. It provides methods to fetch artist information, track details, lyrics, and more. This library is perfect for use in web applications, including React projects.

Features

• Fetch artist information
• Search for tracks and artists
• Retrieve track details and lyrics
• Get top charts for artists and tracks
• Easy-to-use and browser-compatible

Installation

You can install the package via npm:

npm install musixmatch-api-js

Usage

Here's a simple example of how to use musixmatch-api-js in a React project to fetch and display track lyrics.

Importing and Initializing

First, import the package and create an instance of MusixMatchAPI:

import MusixMatchAPI from 'musixmatch-api-js/dist/musixmatchAPI.bundle.js';

const musixmatch = new MusixMatchAPI();

Fetching Track Lyrics

To fetch track lyrics, use the getTrackLyrics method. This method requires a trackId to identify the track:

async function fetchTrackLyrics(trackId) {
    try {
        const lyrics = await musixmatch.getTrackLyrics(trackId);
        console.log(lyrics);
    } catch (error) {
        console.error('Error fetching track lyrics:', error);
    }
}

fetchTrackLyrics('123456');

Using in a React Component

Below is an example of a React component that fetches and displays lyrics for a given track ID.

import React, { useState, useEffect } from 'react';
import MusixMatchAPI from 'musixmatch-api-js/dist/musixmatchAPI.bundle.js';

const musixmatch = new MusixMatchAPI();

const TrackLyrics = ({ trackId }) => {
    const [lyrics, setLyrics] = useState(null);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchLyrics = async () => {
            setLoading(true);
            setError(null);
            try {
                const response = await musixmatch.getTrackLyrics(trackId);
                setLyrics(response.message.body.lyrics.lyrics_body);
            } catch (err) {
                setError('Error fetching lyrics');
            } finally {
                setLoading(false);
            }
        };

        fetchLyrics();
    }, [trackId]);

    return (
        <div>
            {loading && <p>Loading...</p>}
            {error && <p>{error}</p>}
            {lyrics && <pre>{lyrics}</pre>}
        </div>
    );
};

export default TrackLyrics;

Adding the Component to Your App

Finally, use the TrackLyrics component in your main application:

import React from 'react';
import ReactDOM from 'react-dom';
import TrackLyrics from './TrackLyrics';

const App = () => {
    return (
        <div>
            <h1>Track Lyrics</h1>
            <TrackLyrics trackId="123456" />
        </div>
    );
};

ReactDOM.render(<App />, document.getElementById('root'));

Methods

searchTracks(trackQuery, page = 1)

Search for tracks by a query string.

Parameters:

• trackQuery (string): The track name or search query.
• page (number, optional): The page number for pagination (default is 1).

Returns: A promise that resolves to the search results.

getTrack(trackId)

Get detailed information about a track by its ID.

Parameters:

• trackId (string): The ID of the track.

Returns: A promise that resolves to the track details.

getTrackLyrics(trackId)

Get lyrics for a track by its ID.

Parameters:

• trackId (string): The ID of the track.

Returns: A promise that resolves to the track lyrics.

searchArtist(query, page = 1)

Search for artists by a query string.

Parameters:

• query (string): The artist name or search query.
• page (number, optional): The page number for pagination (default is 1).

Returns: A promise that resolves to the search results.

getArtist(artistId)

Get detailed information about an artist by their ID.

Parameters:

• artistId (string): The ID of the artist.

Returns: A promise that resolves to the artist details.

getArtistAlbums(artistId, page = 1)

Get albums by an artist ID.

Parameters:

• artistId (string): The ID of the artist.
• page (number, optional): The page number for pagination (default is 1).

Returns: A promise that resolves to the artist's albums.

getAlbum(albumId)

Get detailed information about an album by its ID.

Parameters:

• albumId (string): The ID of the album.

Returns: A promise that resolves to the album details.

getAlbumTracks(albumId, page = 1)

Get tracks in an album by the album ID.

Parameters:

• albumId (string): The ID of the album.
• page (number, optional): The page number for pagination (default is 1).

Returns: A promise that resolves to the album's tracks.

Contributing

If you'd like to contribute to musixmatch-api-js, please open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License. See the LICENSE file for details.