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.
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:
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.
Report Blog Entry
Comments
Displaying 5 of 5 comments ( View all | Add Comment )
Cillaa💕
Omg! Thank you for this!! I had music but it wouldn't play on mobile just desktop and this worked!! 👏
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
thank you so much!
No problem, glad it works
by 🥓; ; Report
Destini X Shakur
Thank you so much! You’re the GOAT! 🖤
Thanks! Glad it worked :)
by 🥓; ; Report
Shadow Bliss
Still can't get mine to work. Maybe I'm just too dumb for that side of HTML.
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
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.
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