📋Step By Step Instructions

If you have little or no experience with creating and launching web apps and/or NFTs, this is the best place to start!

These instructions are designed to help with using the NFT Music Player Template in your NFTs. They are not, however, a guide to creating smart contracts, minting NFTs, or any other broader web3-related topics.

These instructions and the NFT Music Player Template are provided as-is to the community under a CC0 License. We will continue to update and evolve the template(s) and this documentation, but are currently unable to provide additional support at this time.

Attribution to WarpSound, while not required, is gratefully received in the form of a shoutout or Twitter tag (@warpsound_ai). Hope you find it of value and good luck!

1) Uploading & Pinning Your Media

The first step involves putting your media (cover art PNG or JPG file and individual music MP3 or WAV files) onto a publicly accessible file host/server so that it can be used by the NFT Album Player Template.

The best place to put media to be used in any NFT is on IPFS or ARWEAVE, two "permanent" and distributed storage solutions that have becomes the defacto "standard(s)" for web3.

If you are unfamiliar with how to do this, the easiest path is via Pinata for IPFS:

We HIGHLY recommed purchasing a Pinata Picnic account for $20/mo. These instructions can be followed with a Pinata Free account instead, and multiple releases already have, but Pinata doesn't guarantee reliability of their free-tier file gateway - and it may be intermittently unavailable on OpenSea - so you risk your media/metadata being randomly inaccessible.

Create a Pinata Picnic account HERE.
Once registered + logged in, click the UPLOAD+ button in the Pinata Pin Manager Dashboard.
You can then either upload individual files or a folder. We recommend a folder that contains the cover art (JPG, PNG, GIF, etc) and music files (MP3 or WAV) for your release to help keep things organized. (NOTE: some browsers will not allow folder uploads - in that case, you can just upload individual files)
Once the media is uploaded, you will be able to right-click on each filename and select COPY LINK to get a URL for each individual file (PLEASE NOTE: these links on a Pinata Free account are not 100% reliable). This will be needed for the Playlist Metadata JSON File that powers the player template (see Step 2).

FILE SIZES/FORMATS: To avoid issues for viewers on bad/unstable internet connections, here are some recommendations for COVER ART and MUSIC FILE formats and file sizes:

COVER ART: Best to keep the image square and 2000px x 2000px or smaller. You can use any image file type, but unless you're using a GIF for an animated image, we recommend a JPG so you get the benefit of some compression.

MUSIC FILES: You can use WAV or MP3 files. For the best balance of file size and audio quality we recommend using MP3s saved at 256kbps (or less).

2) Create the Playlist Metadata JSON File

In this step, you're creating the metadata that the NFT Music Player Template needs to pull in all of the necessary information and make it come alive.

Since the NFT Music Player is just a template, none of the information for the cover art, music files, track names, etc are embedded - this is what makes it powerful as an agnostic tool that can be used by anyone.

Download our Playlist Metadata JSON File Template HERE and unzip the downloaded .ZIP file to reveal the .json file contained in it.

We recommend using an app like Visual Studio Code to edit the JSON file - it'll catch syntax errors and underline them in red just like a word processor, ensuring you don't have to redo work because of typos.

If you do not have access to software such as Visual Studio Code, you can also open the JSON template in TextEdit (Mac) or Notepad (PC) and save as Plain Text with .json as the file extension, just be careful you don't delete any of the various characters used in the JSON code (" : , { } [ ]).

It may also be wise to validate your JASON before uploading it to double check that it doesn't have syntax errors. JSONLint is a simple site where you can copy/paste your JSON data and it'll either validate it or show you where there are errors.

In the JSON file, make sure schemaVersion is "1".
Change coverArtUrl to the URL for your cover art (see Step 1 above).
Change title to the title of your release.
Change artist to the artist or project name for your release.
Change chain to the chain this is being used on (the default is "Ethereum", but you can put anything like "Polygon", "Solana", etc here as needed).
Change contractAddress to the address of the contract you are using to mint your tokens (if you don't have this yet you can leave it blank and update it later).
Change tokenID to the Token ID of the NFT this player is being added to (if you don't have this yet you can leave it blank and update it later).
Change tokenType to the type of token being used (the default is "ERC-1155", but can be changed to "ERC-721" or any other token type as needed).
Under items you will list objects for each music track you'd like to include in the player. (The Playlist Metadata JSON File Template has 2 temp item objects added to get you started) a) Make sure kind is set to "audio". b) Change title to the music track's title. c) Change artist to the music track's artist (can be the same as the release's artist, but can also be different - for example, for compilation releases) d) Change url to the the URL for this specific music file (see Step 1 above).
You can add as many or as few music tracks under items as you want. To add more, copy one music track object -- everything from 1 opening { to its closing }, under "items": [ and paste below the last music track object (but before the ] at the bottom of the item listing). So for example, copy this track object:
```
{
      "kind": "audio",
      "title": "Wormhole",
      "artist": "Nayomi",
      "url": "https://cdn.warpsound.ai/ipfs/QmVzZenmmA1zm47dsto7gqmxSZPMNZF6hqy3Jesmb24UDQ/1%20-%20Nayomi%20-%20Wormhome.mp3"
 },
```
And paste before this at the bottom of the JSON template (this is pasting it at the bottom but INSIDE the items array), then change the values as needed:
```
  ]
}
```
IMPORTANT: The last track array should NOT have a comma after it's closing } so that it looks like this. (If it has a comma, it will break):
```
 {
      "kind": "audio",
      "title": "Wormhole",
      "artist": "Nayomi",
      "url": "https://cdn.warpsound.ai/ipfs/QmVzZenmmA1zm47dsto7gqmxSZPMNZF6hqy3Jesmb24UDQ/1%20-%20Nayomi%20-%20Wormhome.mp3"
 
```

3) Upload the Playlist Metadata JSON File

Once you've filled out the Playlist Metadata JSON file, you'll need to upload it to a publicly accessible file host/server just like you did with the media files.

It's best to put it in the same place as those files, so if you used Pinata for IPFS in Step 1 above, simply follow those same steps to upload the Playlist Metadata JSON file.

4) Create Your New Custom NFT Music Player Link

Now you're ready to put it all together to create the custom link that will load the NFT Music Player with your uploaded media and JSON file.

First, copy this link template to a text doc: https://cdn.warpsound.ai/ipfs/QmVYW5vHaV322Kvp2So5ErngP1PrDUneYqo4e9TNygAGSn?playlist-url=YOUR_PLAYLIST_JSON_FILE_URL
Replace the YOUR_PLAYLIST_JSON_FILE_URL string with the link to the Playlist Metadata JSON file you created in Step 3 (for example, if uploaded to IPFS via Pinata, you can right-click on the filename and select COPY LINK to get the URL for it, which will look something like this: https://cdn.warpsound.ai/ipfs/QmTSmGiSbjEWCYjSWrPXFh265uq69BosjRkB268obrcjgt/Nayomi_bestof_2022-playlist.json)
Your custom link will now look something like this example (notice the string after playlist-url= is your JSON file link): https://cdn.warpsound.ai/ipfs/QmVYW5vHaV322Kvp2So5ErngP1PrDUneYqo4e9TNygAGSn?playlist-url=https://cdn.warpsound.ai/ipfs/QmTSmGiSbjEWCYjSWrPXFh265uq69BosjRkB268obrcjgt/Nayomi_bestof_2022-playlist.json
To test your link and make sure it works correctly, simply paste it into any browser (desktop or mobile). If your link and the JSON file are formatted correctly, your release will load! If not, on-screen error messages should guide you to the errors in your JSON file so you can fix them ad re-upload.

5) Add Your Custom Link To Your NFT

Now that you've uploaded your media, created and uploaded your JSON file, created your custom link, and tested it, you can add it to the metadat of the NFT you are creating.

Add a new metadata field to the NFT you are creating titled animation_url and paste your full custom link from Step 4 in its value field.
Add a second new metadata field in your NFT titled animation_detail and add { "format": "HTML" } in its value field.
Add a third new metadata field in your NFT titled playlist_metadata and add the link to the Playlist Metadata JSON file you created in Step 3 here (NOTE: this is specifically to help web3 music players easily pull the Playlist Metadata if they wish to use their native players/platforms)

We recommend using Manifold to create your own ERC-721 or ERC-1155 smart contract and tokens (NFTs) using their Creator Contracts. It's simple, creator-focused, owned by you, and free. They have plenty of documentation to help you get started.

When using Manifold's Creator Contract, you'll simply enter the 3 new metadata fields listed above as HIDDEN properties through the Manifold Studio token editor UI/UX.

We also recommend using the Manifold Claim Page app inside Manifold Studio to setup simple, free, customizable claim pages that collectors can use to mint your NFTs easily and securely without the need for web hosting fees or the use of a specific NFT marketplace.

If using a contract/token service/platform other than Manifold, or a marketplace directly, please refer to their documentation on how to add metadata fields to your NFTs. Should be very straightforward.

If using a custom contract, please reach out to your devs/partners to determine how to add these fields.

6) Recommended Image & Description Changes

Lastly, in addition to the 3 new metadata fields in your NFT, we also recommend updates to your NFT's primary image and description. These changes are helpful as a fallback in situations on marketplaces and platforms where the dynamic, HTML-based NFT content doesn't display.

Use your cover art as the main image for your NFT (you can either use the URL from step 1 in the NFT's image metadata field, or upload via the service provider's UI/UX if that is an option).
Add the full URL used in the animation_url to the description field of your NFT. (This will allow the collector to click this link and load the player in the web browser if it doesn't load on an unsupported marketplace/platform)

7) Mint / Distribute Your NFTs!

This is the last step. Once you've uploaded your media, created and uploaded the Playlist Metadata JSON file, and added the player to your NFT metadata, all you need to do it follow the steps for your smart contract / NFT provider's service(s) to mint, list, and/or distribute your NFTs.

If you are unsure of how to complete this step and make your NFTs available for collection on the blockchain, please reach out to your smart contract / NFT service provider and/or their documentation as that is beyond the scope of this document.

PreviousQuick Start NextWhat is the Playlist Metadata Standard?

Last updated 1 year ago