🥓's profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog

View Profile

Report Blog Entry

How to have music/audio on your page (HTML) *no longer works*

So alot of people have trouble getting audio to play on their page (myself included when I changed my layout and some coding). Note: Viewing page on mobile won't work in most cases. (Chrome only allows auto play muted, I think it is the same with the Brave browser).


I've found a solution and I've found ways to make it basically anyone should be able to follow. I will explain a bit of the code too. The "Your browser does not support the audio element." is just a message that will pop up for you/users if your browser doesn't support it and will not display for any other reason. Also when I say URL I mean the link/address to where the actual file is located so it will end in .mp3 for example.

Video tutorial here

Autoplay without displaying player/controls

<div style="display:none">
<audio controls="0" autoplay="1">
  <source src="URL to MP3.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</source></audio></div>

This code will basically have an audio file play, but have it hidden. In my case its only an audio clip that goes for 5 seconds. But if you have music you may want to be nice and have a tiny player so people can stop the audio on your page (up to you, I don't care, others can though).

Autoplay with player/controller

If you want to have a player displaying (its quite small and compact) simply remove the div part of the code so it looks like this:

<audio controls="1" autoplay="1">
  <source src="URL to MP3 file.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</source></audio>

Example (autoplay has been disabled in this example):  Your browser does not support the audio element.

Want to have multiple songs playing (kind of like a playlist where you can skip back and forth?) Good question! Will update when I've worked out a simple code/workaround.


How to host/get URL of audio file


Now how do we find this URL to the music track? There are two ways...If you have a website you can upload, and copy the location of the audio file that is hosted on your website. It should look something like (example) www.yourwebsite.com/uploads/youraudiofile.mp3 

If you don't have your own website to host files, make a free account on Mailbox Drive and upload your MP3 (restricted to MP3/MP4). If you don't make an account, your file will be deleted in 30 days, and you will need to reupload, and get a new URL for the newly uploaded file. Registering allows - Unlimited Storage,  Customizeable Urls,  Permanent Direct Download Urls and  Customize Mp3 ID3 Tags.

If you use ShareX to upload/host your photos, this software is also capaible of uploading video/music files too. Otherwise if this seems like a better option get it here

So let me know if this helped you out, I put this in the about me section but in theory...it should work in any section you put it in when editing your profile. Also if you find any other hosting sites that allow what Mailbox Drive does then please leave a comment! 

Will update both works/doesn't work lists as hopefully people give some suggestions.

Site's that I know that WONT work in this case:
  • Google Drive
  • Dropbox
  • MEGA

Converting audio formats to MP3 to use for Mailbox Drive

So say you want a song/audio clip that isn't MP3 but need to use mailbox drive?

Option 1: You can use an online convertor here, you can leave all the values to no change, download it and then upload to mailbox drive. The good thing is this website allows you to convert/rip the audio from video files too (untested myself, but it says so on the website)

Option 2: Online Downloader put in a YouTube URL, and download it to MP3.

Option 3: Throw your audio file into an audio program such as Audacity and save out as MP3.

Option 4: Throw your audio file into a video editing program (Sony Vegas/Adobe Premiere) and save/render as MP3.

Option 5: If you can't figure it out, I'll convert the file for you, if your having alot of trouble with all of this I can convert the file, upload it and send you the URL.


8 Kudos

Comments

Displaying 5 of 5 comments ( View all | Add Comment )

Cillaa💕

Cillaa💕's profile picture

Omg! Thank you for this!! I had music but it wouldn't play on mobile just desktop and this worked!! 👏


Report Comment



Oh this worked on mobile? Mine didn't work on mobile last time I attempted..I think xD
It's good to know! hahaha thanks!

by 🥓; ; Report

sierrasilver

sierrasilver's profile picture

thank you so much!


Report Comment



No problem, glad it works

by 🥓; ; Report

Destini X Shakur

Destini X Shakur 's profile picture

Thank you so much! You’re the GOAT! 🖤


Report Comment



Thanks! Glad it worked :)

by 🥓; ; Report

Shadow Bliss

Shadow Bliss's profile picture

Still can't get mine to work. Maybe I'm just too dumb for that side of HTML.


Report Comment



Which part? If its to add more than one song, that part is wrong and I'm trying to find a fix...

by 🥓; ; Report

I just couldn't get it to work.

Nevermind. I figured today was my 9 month anniversary on the site and I'll just put the song there anyway.

by Shadow Bliss; ; Report

If you are putting like a youtube link, that's why its not working you need to have an actual song file uploaded somewhere either on Wordpress/Weebly or the other one I mentioned, and get its link from there :)

by 🥓; ; Report

Also wow 9 months, congrats!

by 🥓; ; Report

Cathy

Cathy's profile picture

oh yeah! this is good! Gonna have to try the multiple songs player route and see how it works. I posted a YouTube video but noticed the video doesn't show up, just the song with no way to stop it so that's not ideal.


Report Comment



I think it might be with code you used from the blog.



That SHOULD basically show some type of controls, but it may show the video itself.

Oh please let me know how it goes, as I've not tested multiple songs.

by 🥓; ; Report

definitely

by Cathy; ; Report

Ok I'm updating the blog, and doing some examples and seems it doesn't do what I thought it will do...I will test something and update it soon.

by 🥓; ; Report

So I tried to do the one song with the controls and I can get the player to show up but the song doesn't play at all. Don't know what the heck is up...

by Cathy; ; Report

What's the URL to the song and what format?

by 🥓; ; Report

https://youtu.be/IxTb6kCc0Uc
that the url, dont know what the format is...or where to find that

by Cathy; ; Report

Ah yes, that's why its not working it needs to be directly to an MP3 file I can do it for you if you like. Gimme 5

by 🥓; ; Report

Basically you need to download/have the song and upload it and then get its file location on where you uploaded it. I've just uploaded it (hidden) on my website. So where you've been putting the youtube link put this in instead.

https://kylebaconart.weebly.com/uploads/4/1/7/1/41713935/the_pink_spiders___-_capital_f.mp3

by 🥓; ; Report

AHH, well I also have the mp3 of the song, should I want to use another mp3 song do I just take the track from my computer and go to a tinypic.com type of site?

by Cathy; ; Report

yeee, messaged you :)

by 🥓; ; Report