Being able to create a Web3 music streaming service offers huge potential. Why? Because everyone wants access to a music platform to experience good vibes. These vibes are magical – they have the power to evoke the entire pallet of emotions. With music being so powerful, it is no surprise that music has been with people for ages. Moreover, you can bet your bottom dollar that music will continue to be an important part of our everyday life. Now, adding people’s desire for decentralization into the picture, Web3 music platform alternatives are ought to take over the world. Thus, we want to show you how to create a Web3 music streaming service (think Spotify Web3 clone) with Moralis!
So, would you like to create your own Web3 music platform? If yes, then you came to the right place. Moving forward, you will get to follow a combination of written and video instructions guiding you step by step. Along the way, you’ll learn how to use some phenomenal blockchain development tools. As such, you will learn to work with Remix to deploy your smart contracts easily. However, the most valuable aspect of this article comes in the form of learning how to use the ultimate Web3 development platform – Moralis. This “Firebase for crypto” platform is the pinnacle of the current Web3 tech stack. Thus, Moralis enables you to cover all your blockchain-related backend needs by copying and pasting short snippets of code. Moreover, it shortens an average go-to-market time by 87 percent. Hence, you can easily create a Web3 music streaming service and level up your Web3 development game!
Preview of Our Web3 Music Platform Example
As mentioned above, most of this article will primarily focus on showing you how to create a Web3 music streaming service. However, before we roll up our sleeves and start building a Web3 music platform, we want to provide you with some clarity. By previewing our example dApp (decentralized application), you’ll get to move on with the end in mind. Also, after the preview, you’ll easily decide if you want to take on our example project or not.
Let’s start with the home screen of our Web3 music platform:
In the screenshot above, you can see all the key frontend parts of our dApp. On the left-hand side, there’s a side menu bar. It has the logo on top and then the search bar, home page link, your music, and the recently played tabs below it. Furthermore, there’s also the install app tab where users can go to install apps. Moreover, the majority of the screen displays different albums. In addition, the albums can be viewed in three different ways: featured albums, genre and mood, and new releases.
Beyond Web2 – Music as NFTs
All of the above presented is neat; however, it could also be a regular Web2 music platform. Hence, the real value comes with the fact that all of the music albums in our dApp are actually NFTs. Each album is an NFT collection of songs. Hence, each song is an NFT. Moreover, by clicking on one of the above albums, users get to see the songs it contains:
The image above displays the details of the “Shadow” album, which we selected for this preview. On top is the album’s cover image. Next to the cover image is the title of the album, the name of the artist, the year of the album’s release, and the number of songs in the album. At the bottom part of the page is the list of songs contained in this album. The list includes the titles of the songs, and on their right-hand side, we can see their length. Furthermore, two buttons are located between the list and the album’s cover image. The play button serves to play the album’s songs using our example Web3 music platform’s music player. The “OpenSea” button links to the most popular NFT marketplace. Once transferred to OpenSea, users can even purchase all of the songs as NFTs:
Of course, we couldn’t create a Web3 music streaming service without a music player. As such, a click on the play button initiates the latter. Moreover, our dApp’s built-in music player enables users to skip songs, pause or play the music, and adjust the volume:
Create a Web3 Music Streaming Service – Example Project
After seeing the above preview, you know what an excellent dApp we are about to build. As such, you are most likely eager to get the show on the road. However, before we show you how to properly set up this project, you need to be aware of your options. Thus, you can clone the finished code and create a Web3 music streaming service in minutes. On the other hand, you start with the starter code and build following our lead. Both of the templates are available to you on GitHub. However, the choice is yours. Beginning with the “starter code” will enable you to get the most out of this tutorial. Nonetheless, this is also a great time to create your free Moralis account. You’ll need it once we get to the Web3 backend portion of this example project.
Example Project Initial Setup
Unless this is your first coding feat, you probably realize you need a code editor. Our preferred code editor is Visual Studio Code (VSC). As such, the instructions will be focused on that code editor. Now, use the link above to access the “starter code”. Then clone it:
After successfully copying the GitHub URL, you want to use VSC’s terminal. In order to clone the code, enter “git clone” followed by the copied URL in the command line:
Then, enter “cd Spotify-Starter”. Moving forward, type “Yarn” to install all the dependencies:
As you wait for all the dependencies to install, we recommend looking at folder three (src) of the starter code:
The majority of our focus will be on the files inside the “src” folder. There you can also see the “App.js” file, which already utilizes a React router. The latter enables us to transition between the home and album pages. Next is the “index.js” file, which hosts the React “BrowserRouter”:
Moreover, looking at the screenshot above, you can see that this is also the file in which we will paste our Moralis server’s details. This will be our ticket to the power of Moralis’ SDK.
Next, enter “yarn start” in the terminal’s command line to view what we are starting with:
The above command will run our application (its initial form) in “localhost:3000”. This enables us to see the “Album Page” page on a blank canvas:
By clicking on “Album Page”, you can test the previously-mentioned router. As such, it should take you from the “Home” page to the “Album Page”. The router also works the other way around. However, when we are on the “Album Page” page, the link we see is “Home”:
Create a Web3 Music Streaming Service – Frontend
At this point, you should have completed the initial project setup. As such, it is time to focus on creating a great Web3 UI. Thus, you will have a chance to follow the lead of one of Moralis’ experts in the video at the bottom of this article. He’ll provide you with pretty detailed guidance. First, starting at 03:11, he’ll show you how to create the sidebar. Starting at 11:17, you’ll learn how to build a proper homepage. Then, at 20:43, you’ll get to tackle the album page. Lastly, starting at 31:31, you will implement an audio player to your Web3 music platform.
With all of these UI development stages finished, you will have an app that looks like the one presented in the “Preview of Our Web3 Music Platform Example” section. But so far, we haven’t added any Web3 functionalities. Hence, it’s time to use the power of Moralis and convert our app into a dApp. We’ll do this by connecting with Moralis’ SDK. As such, we’ll access all of Moralis’ tools, including its IPFS integration. We will use the latter to store our Web3 music streaming service’s audio files in a decentralized way. Our next stop will be deploying our smart contract using Remix. That way, we will take care of the NFT minting process. Finally, we will use Moralis’ Web3 API to include all other blockchain features.
Create a Web3 Music Streaming Service with Moralis
By now, you know that Moralis offers you a way to effortlessly overcome all of the limitations of RPC nodes. For one, this best Web3 backend platform offers the most practical solutions for Web3 authentication. The latter is an essential part of every dApp. Furthermore, after creating your Moralis server, you also get to work with your Moralis dashboard. This serves as a database for on-chain data. Moreover, together with the Moralis “sync” feature, you get to sync and index smart contract events. In addition, Moralis comes with several useful integrations, including MetaMask, WalletConnect, and IPFS. It is the IPFS integration that you’ll use to upload files to IPFS as part of this example project. But first, you need to complete the initial Moralis setup.
The initial Moralis setup includes four steps. First, you need to create your free Moralis account or log in to your existing one. Next, you create a new server. Next, you must access that server’s details and use them to populate your coding file. In our example, the “index.js” file is where you need to replace the placeholders:
Note: For detailed video instructions of the initial Moralis setup, use the video below starting at 54:56.
Uploading Files to IPFS
Despite the fact that there are many cloud storage solutions on the market, the majority of them are centralized. Fortunately, we can use Moralis’ IPFS integration that offers a decentralized cloud storage solution. You get to cover this part by creating a new folder called “Album”. It contains two JavaScript files that will help you create metadata files and upload them to IPFS. The two files are “metadata.js” and “music.js”. Inside the “Album” folder, we also have the “export” folder, which contains example audio files and an album’s cover image:
The above screenshot shows that you need to enter your API key inside the “music.js” file. This is again where Moralis’ SDK will cover your back. Use the video below (57:00) to be guided as you obtain your API key and then upload files to IPFS.
Minting NFTs to Represent Albums
Once you’ve uploaded the files and their metadata to IPFS, it’s time to mint album NFTs. By doing so, you will be able to list them on OpenSea. If you know a thing or two about minting NFTs, you know that smart contracts of different standards are involved (namely, ERC-721 and ERC-1155). Using OpenZeppelin’s templates, we created a pretty simple smart contract called “Album.sol”. If you want to learn more about “Album.sol”, how to compile it, and finally deploy it using Remix, refer to the video below (01:04:20).
Display Album NFTs in Our Music Streaming Service
All that’s left to do is display the album NFTs. Fortunately, you can use Moralis’ Web3 API for that purpose. Using the appropriate Moralis endpoint inside your React app will fetch the above-minted NFTs. Once fetched, you can easily display them inside your Web3 music platform. Again, we’ll hand you over to the Moralis expert. In the video below (01:09:22), he’ll show you how to use the “getAllTokenIds” endpoint inside “useAlbum.js”.
Finally, here’s the video tutorial with all the details on how to create a Web3 music streaming service:
Web3 Music Platform – Create a Web3 Music Streaming Service – Summary
If this was your first rodeo with Web3 development, you learned a lot. You now know that with the right tools, you can have powerful dApps up and running in a relatively short time. Moreover, if you’ve followed our lead, you’ve also learned how to create a Web3 music streaming service, which is no small task. As such, you know that aside from creating a great UI, you need to incorporate decentralized file storing. Once the files are properly stored, you need to use a proper smart contract to mint NFT. Then, all that’s left to do is fetch those NFTs with your Web3 music platform.
In case you found this example project interesting, we encourage you to visit the Moralis blog and the Moralis YouTube channel. Aside from detailed tutorials, you’ll find various blockchain development aspects explained there. Some of our latest topics cover gasless metaverse interactions, how to create an ERC-721 NFT, Unity Web3 development, how to launch a white-label NFT marketplace, connecting a Unity game with Web3 login, metaverse smart contract examples, how to build a cross-chain Zapper dApp with ReactJS, how to build a Web3 MMORPG with Unity, and much more. As such, both of these outlets serve as one of the best ways to continue your free crypto education.
However, if you want to become a Web3 developer sooner rather than later, then you ought to take a more professional approach. Hence, Moralis Academy might be exactly what you are looking for. This online crypto education platform will provide you with top-tier courses and a personalized study path. Although, an even greater value awaits you in the form of Moralis’ community and expert mentorship.
