Hello and welcome to my next HTML tutorial, where I show you how you can customize your profile, your blog layout or any other website with HTML and CSS! If you're new to this, you can find the whole tutorial series in my blog where I explain HTML and CSS from the very beginning. It's really easy, don't worry! :) I can't do these that often sadly because it takes a while researching and writing everything and I have a full time job which requires most of my time and mental power too, so I just want to apologize for the long time you had to wait. Today I want to cover something I got requested A LOT, and I can't blame you because it's one of the best features for profile page. You might have noticed it if you've ever visited my profile, that I have some song playing on it when you load the page. A while ago we could use the adobe flash player to create a playlist that you could insert in your profile very easily. Since the flash player doesn't seem to work on friendproject anymore, we needed to find another alternative now. What I can show you isn't exactly as good as the flash player playlists, because with this method you can choose only one single song to play on your profile. Anyway, it's pretty cool. Let's get started!
HTML Audio
HTML5 brings us a tag for implementing an audio file in our web page. It can be a song, but it can also be any other sound as long as it has a supported format. And this is how it looks:
<audio></audio>
1
Before we can implement a song in it, we need the song file on our computer (if you already have it downloaded on your PC, you can skip this step). I usually use youtube as the source for my songs, so I'll show you my method - probably not the best, and there are 1000 of other ones, but just to have an example to start with. Go on YouTube and search for the song you want to use. Copy it's link, then go to https://2conv.com/en36/ and follow the steps to download an mp3 file (be careful, that site often opens some ads or stuff, I don't know a better one though...). Once you have it somewhere on your PC, time for the next step.
2
Now go to https://kiwi6.com/. If you don't have yet, you will need to create an account there. Once you're logged in, go to Account->File Manager:
On this page, you should be able to upload files. You might have to enable flash player first. Upload the .mp3 file of your song. When you're done, there should be a field called "Direct Hotlink" with an URL that ends with .mp3. Copy this link.
Back to the code with the <audio> tag. Now you can specify a source-attribute to the tag, exactly like you would do it with an image.
<audio src=""></audio>
Inside the scr, paste the mp3 link. If everything went right, you're almost done. The audio is in your page, but if you load it, it won't play, because by default, it doesn't start on it's own, it needs a trigger. To fix that, you just need to put another attribute in the tag: the autoplay-attribute. What it does is to trigger the player the moment your page is loaded.
Now when you load your profile, you should hear the song playing!
That's already pretty nice, but there's even more stuff you can do with the audio tag. You can give it music player-like controls for pausing and playing or adjust the volume by simply adding another attribute to the <audio> tag, which is the controls-attribute.
Now something like this should appear in the position where you have the code:
Note that this is the way it looks in firefox, however, in other browsers it might look different. In Chrome for example, you would see this:
If you think your song can be heard over and over again because it's so good, or if you just want to annoy your profile visitors, there's also the loop-attribute. If you add it, the audio will play on loop.
If you have spotify, your lucky, because spotify has an option to embed a playlist as HTML code. However, it won't have autoplay and for people who don't have spotify or aren't logged in with it on their device will only be able to hear short parts of a few songs from it. Anyway, it's still a nice way to share your music with others. Here's how it works. Go to the spotify playlist you want to use. It can be your own playlist or any other on the platform. Then you click on the three dots. Under the share option there should be "Copy Embed Code".
Great playlist btw o.O Copy it and paste it anywhere you'd like in your profile. Now you should have code like this:
All you have to do now is to replace the "*****" with "embed", and the spotify player should be there! EDIT: Apparently, friendproject censores the word you have to replace for some reason. Anyway, if you copy it you will see what is meant. Hope this doesn't cause any confusion.
You can also combine the spotify playlist and the HTML audio tag in one page since the one from spotify doesn't have autoplay anyway.
Sooo no you are able to implement music in your profile! I want to see a lot of you with some profile songs now xD If you're still having issues to get it to work or questions about it, please don't hesitate to ask me! I'm always happy to help people and I will do my best to support you with all HTML- or CSS-problems. Also I'm always happy about requests or suggestions for things you want me to do a tutorial about. I still have a few ideas but if you have something, please tell me! Hope you'll have fun with this new learned feature ^-^
hey, i found an alternative method that solves the issue with that kiwi website being a broken pile of junk, view_blog.php?id=0000024216 there are different options for having music on your profile here both in the blog post and the comments, but the most important thing is it shares a file sharing website whose links work - https://www.mailboxdrive.com/
they work with a different code than what you described here but all of that information i found in the comments section
Hey, I've noticed that too, it's probably a current problem with the website. I'm trying to find an alternative until they fixed it, sorry I can't help you right now :/
hay ive followed your method and everything was going right but kiwi6 doesnt let me upload :(( i got redirected to a blank page with an error message and ive tried again many times, any ideas? sorry for bothering!
Hey! I just tried it, and I got redirected to a blank page with an error message, is this also what happens to you? If so, this seems to be a problem with the website. I can try to find some alternatives, I'll give an update when I find something!
For me it works on your profile! You have it twice tho, one starts to play immediatly and one is bound to the control box :D But maybe we can try to figure out why it won't play for you. What browser are you using?
I tried the first method but the song won't play. The audio box shows up when I click on my profile but it won't play the song. However when I right click on the audio box and click "Copy Audio Address" and paste it on a new tab, the song plays automtically by itself, but it won't work on my profile. This is the second time I've done this method and it sadly hasn't worked for me. Any ideas?
