Melo Client Code

Melo is a web App that helps you to bring sound into your web projects easily. The npm package doesn't work without an API key from the Tool itself. Checkout the website at getmelo.io

Install

# with npm
npm install melo-client

with

// In your application, import and configure melo. E.g. your index.js file in your root. It can have a different name depending on how you named it in your package.json file.
import meloInit from "melo-client";

meloInit({
    api: "", // Your Api Url here, you can get it from Studio of your project
    accesToken: "" // Your Acces Token here, you can find it right beneath the api url in the studio
});

or use good ol' plain js and place this at the end of your footer element

<script type="module" src="https://unpkg.com/melo-client/dist/melo.umd.js"></script>
<script type="module">      
    window.melo({
        api: "", // your API here
        accessToken: "" // your Access Token here
    });
</script>

CAUTION: This exposes your api credentials. This is not recommended for production. I recommend not to save to login credentials unsecured directly into your project. Dotenv can be a good way to store your credentials in environment variables.

Usage

In the studio tool you can define an identifier for your compositions. Use the data Attribute to connect your selected elements to you configured sound Files from the tool.

<div data-melo="your-identifier-here"></div>

The tool will now do the rest for you to initialise the audio files.