How to mint an interactive NFT audio player.

ⓘ This article was originally published on Wednesday, June 29th, 2022 @ 4:54p EST

Early this morning I’d shared some proof-of-concept NFT audio players over on Twitter x r/SuperStonk and there were quite a few people who were interested in learning how to do this, so I’ve decided to put together this tutorial in hopes of helping others mint their own music.

Here’s a quick list of all the tools I’ll be using throughout this tutorial;

An IDE: personally I’m using BBEdit but you’re welcome to use whatever you like.
Photoshop: this is only to create the thumbnail displayed in the wallet.
Pinata: used to interact with IPFS.
Loopring: used to mint the NFT on L2.
GameStop Wallet: this is where the NFT can be played.

Getting Started

The first thing you’ll need is the source code for the music player which can be found here, on GitHub.

For anyone that’s not familiar with GitHub, the screenshot above shows how you can download a copy of the source code locally which is the first step.

After you’ve downloaded the source’s .zip file locally you’ll need to extract (unzip) the content.

Once unzipped you’ll see the following files;

app.js: this is where you’ll define the order of your playlist.
index.html: this will be the entry point into your NFT.
assets (directory): this includes 2x subdirectories for album art (called “art”) + your audio files (called “audio”).
style.css: you can set modify the player style here if you’d like.

Step 1: Loading your music + album art.

The first step is to remove the sample-data and load your audio files + album art into the /assets directory.

Your audio files (either .mp3 or .wav) should be placed into “audio” subdirectory.
Your album art files (either .jpg or .png) should be placed into the “art” subdirectory.

Note: It looks like my original .wav audio files were too large to upload to GitHub so I’ve converted a single “audio” file to .mp3 in that directory. You’ll also notice the “art” directory only has 1x sample-data file, please remove these files from your project and overwrite with your own art + audio.

Note 2: I’ve removed all spaces from my filenames in this example and for ease of use I would recommend you either use dashes or underscores instead of spaces in your file names as well. So, for example, if your first track was called “My Awesome Song.mp3” I would recommend renaming this to either “My-Awesome-Song.mp3” or “My_Awesome_Song.mp3”.

Step 2: Updating the playlist to play your music.

Once you’ve got your audio + art files added the next step is to open the app.js file to build your playlist.

The playlist building begins on line 28 of this file and you’ll notice the next 6x lines are repeated for each song in the album.

				
					songs: [
    {
      name: 'Treat Me Right',
      singer: 'ElloXo',
      path: './assets/audio/01_Treat-Me-Right.wav',
      image: './assets/art/Art-Track-1.png',
    },

If you have more than 10x songs in your album you’ll need to copy lines 2-7 (above) to add additional tracks to your player.

Or, if you plan to release less than 10x songs you’re welcome to remove that 6x line pattern to fit your album.

Note: Currently the “singer” field is not displayed anywhere within this version of the audio player. If you’d like to add additional artist or track information you’re welcome to add that to the “name” field. Here’s a couple examples of what you could do there;

				
					name: 'Track 01: Treat Me Right',
name: 'Treat Me Right, By: ElloXo',

The “path” and “image” lines also need to be updated on a track-by-track basis.

Note: My example uses .wav files, but if you’ve loaded .mp3 files into the /assets/audio directory then you’ll need to make sure you’ve updated your file extension to match. The same goes for your album art, if you’ve used .jpg you’ll need to adjust from the .png used in my example.

Step 3: Setting the localStorage key.

The final change you need to make within the app.js file is on line 5, this is the localStorage key used for your player and it needs to have a unique name.

				
					const PlAYER_STORAGE_KEY = 'MY_MUSIC_PLAYER';

I would recommend generating a random string for this which might look something like this (please do not use this example in your project);

				
					const PlAYER_STORAGE_KEY = 'xCdji_LKMai_aiLBv';

Step 4: Final player modifications.

In your index.html file you’ll want to update lines 7 and 28-29 to your artist and album name.

These lines look like this in the sample data;

				
					<title>ElloXo, Feel The Love</title>

<h4>Now playing:</h4>
<h2>Feel The Love, an album by ElloXo</h2>

Step 5: Further customizing your player (optional).

If you’d like to change any colors or font sizes used in your audio player most of that is found within style.css

If there’s anything you’d like to change that you’re having trouble finding, please feel free to send me a DM over on Twitter.

Step 6: Testing your player locally before minting.

To test that everything is working as-expected prior to minting your NFT simply open your index.html file within your preferred browser.

Note: You can drag-and-drop the index.html file into your browser to open it as well, that’ll look something like this;

Step 7: Minting your interactive NFT.

The first thing you’ll need to do is create a cover photo / thumbnail that will be visible within the GameStop wallet.

Once you’ve got that created you’ll need to upload it to Pinata (or however you interact with IPFS).

You’ll also need to put all of the files you originally downloaded into an /src directory before uploading that /src directory to IPFS as well.

Once you’ve got your thumbnail image + audio player (/src directory) uploaded separately to IPFS you’re ready to create the metadata.json file for your interactive NFT.

Here’s what the metadata.json file looks like for my original project;

				
					{
  "description": "Stream ElloXo's album, Feel The Love.", 
  "image": "ipfs://QmPvBkMzStuznhXY1vkFaLgPXkCqijSk2mEbjzQPRqoLfV", 
  "animation_url": "ipfs://Qmcq71S2rJZtFFpboyBHNTEnPE3mQYbSVLEVVZ5xXRwTuv?filename=src",
  "name": "Feel The Love",
  "artist": "Nathan Ello",
  "royalty_percentage": 10
}

^ Note: The CID of my image is used for “image” and the CID of my /src directory is used for “animation_url”. You can also change the “royalty_percentage” to any integer 0-10, the max royalty payout is currently 10% and that’s what the “10” denotes above.

Once you’ve created your metadata.json file you’ll also need to upload that file to IPFS, from there you can mint your interactive NFT.

^ Note: I have placed my metadata.json file into it’s own directory called “Music Player Meta” and then uploaded that directory to Pinata.

Step 8: Minting your NFT on Loopring L2.

I’ve used Loopring’s “advance create” minting option to mint my interactive NFT which can be seen in the screenshot below;

Note: Once your interactive NFT has been minted you will not be able to play it within Loopring’s website.

The next step is to transfer the L2 NFT to your GameStop wallet, once you’ve done that you’ll be able to click on the thumbnail image within GameStop’s wallet which will launch the audio player interface. From there, click the play icon to start listening to your tunes :)

Additional Resources

If you have any questions about this process, please feel free to send us a DM over on Twitter.

Also, please do NOT abuse this player and mint music that you didn’t produce, stealing other peoples music isn’t cool.

Tips: If you’d like to help support my NFT development journey with a tip you can click the “copy wallet address” text below to copy my wallet to your clipboard. Tips are not required, you are welcome to use this code and tutorial without tipping.

Wallet Address: 0x0A866B8Bf3CD444B412130833273B2231b5B50d8

Copy Wallet Address