There’s plenty of options for hosting your own music online, from SoundCloud, to Bandcamp, or Spotify.
But sometimes you just want to take more control over how your music is presented, and nothing can beat running your own website.
And if that sounds like too much of a commitment, don’t worry. You can get a simple, highly customizable music player up and running in less than a minute. Here’s how.
- Remix my html-music player on Glitch. (You can create a free account later, if you don’t already have one.)
2. Delete the mp3 files in the assets folder and upload your own music by dragging them into the folder or using the Upload an Asset button.
You can click each file to bring up the file information dialog that also contains the Delete button.
3. Update the tracklist.json file with links to your uploaded music and song titles.
It should have a following format:
[
{
"title": "Synth 01",
"url": "https://cdn.glitch.com/ed849d0d-4e96-40b3-96fc-ba2ca9af6c84%2Fsynth-01.mp3?v=1612107698617"
},
{
"title": "Piano 03",
"url": "https://cdn.glitch.com/ed849d0d-4e96-40b3-96fc-ba2ca9af6c84%2Fpiano-03.mp3?v=1612101419482"
}
]You can see the URL of your songs by clicking each file while browsing your assets folder. Also, note that Glitch gives you 512MB of space for your assets.
4. Update index.html with a little bit about yourself and links to your social media profiles.
If you need a little bit of help with HTML, check out this beginner-friendly introduction.
5. And you’re ready to share!
Advanced customization
First thing you might want to do is to add meta tags used by social media sites like Twitter to make your site look better when shared online. You can use a tool like this Twitter Card Generator. and copy the code it gives you to your index.html file inside the <head> tag.
When you’re finished, you can preview your playlist with the Twitter Cards Validator. You can also use an Open Graph meta tag generator to add support for sites like Facebook and Linked in.
The site comes with version 5 of Bootstrap, which lets you easily change your playlist page with pre-built blocks. Have a look at this section inside script.js, this is how the code for each track is generated.
html += `
<li class="list-group-item pt-4 pb-4 track" id="track-${ i+1 }">
<p class="fs-4">${ trackList[i].title }</p>
<div class="audio">
<audio controls id="track-${ i+1 }">
<source src="${ trackList[i].url }" />
</audio>
</div>
</li>
`Note that trackList[i]corresponds to the data inside playlist.json, so trackList[i].url would be pulled from the url field, for example. You could then add an image field and then use that to show a picture next to your track, just to give you an idea.
Be sure to share your playlists and help me build a showcase gallery.
