How to Upload Mp3 to Player for Free

April 13, 2022 Post a Comment

If you want your website visitors to enjoy an MP3 file, one of the easiest ways to do this is to embed it on the page. With an embedded MP3 player, visitors don't need to straight download the audio or use additional software considering it plays inline.

We're going to detail different methods that you can use to embed an MP3 on your website, including using HTML5 and Google Drive.

i. Embed an MP3 on Your Website With HTML5

If yous're comfortable editing the code of your website, 1 of the easiest ways to embed an MP3 file is to utilise HTML5.

The HTML5 <sound> tag might appear basic on first sight, but it's powerful since information technology'southward compatible with all major desktop and mobile browsers.

To embed an MP3 with HTML5, employ this lawmaking:

          <audio controls><source src="MP3 URL Hither" type="audio/mpeg">Your browser does not support the audio tag.</audio>

Simply supercede MP3 URL HERE with your uploaded audio file. This cannot be a file stored on your computer; it must be available online.

This code will place a small audio player on the page, from which the user can play, pause, scrub, and conform the book. Here's what it looks like on Firefox:

This lawmaking also includes a message that volition display in place of the media role player, in the unlikely circumstance that the user's browser doesn't support the player.

Y'all tin use attributes such as autoplay and loop, like so:

          <sound controls autoplay loop><source src="MP3 URL Here" type="audio/mpeg">Your browser does not support the audio tag.</audio>

Conduct in mind that most browsers won't support autoplay because it's considered bad practice to automatically force audio onto users.

Bones customization can be applied to the audio actor block via CSS, similar border and padding. However, you will demand to use JavaScript to properly style the thespian itself so that information technology's consistent across browsers.

More data about the HTML5 audio thespian attributes and customization can be found on MDN Web Docs.

two. Embed an MP3 on Your Website With Google Drive

Google Drive is an excellent and complimentary deject storage provider. You can use it to upload your MP3 file and create an audio player.

With the MP3 uploaded to Google Drive:

Right-click the file and click Become link.
Change the accessibility restriction to Anyone with the link.
Finally, click Copy link.

This will give you lot a URL similar to this:

          https://drive.google.com/file/d/123/view?usp=sharing

Supplant view?usp=sharing with preview, like then:

          https://bulldoze.google.com/file/d/123/preview

Then, use an<iframe> tag to embed the MP3 actor on your website, replacing Drive URL with the URL you just edited:

          <iframe frameborder="0" width="400" height="150" src="Bulldoze URL"></iframe>

You can conform, add together to, or remove the attributes (likeframeborder andwidth) every bit necessary.

This will embed the MP3 on your website using the Google Drive player. Users tin play, scrub, and adjust the volume, just like with the HTML5 player. Hither's what information technology looks similar:

The chief divergence is the presence of a pop out button. This opens the MP3 on Google Drive, where users tin can add comments, share the file, and more.

3. Embed an MP3 on Your Website With a CMS

If you utilise a content management system (CMS) for your website, y'all can likely even so apply the methods above. That said, yous might not exist comfortable editing HTML code.

Whatever good CMS volition permit you add audio to your website hands through its interface. For case, on WordPress, you simply need to add together a block, select Sound, and then either Upload the MP3, select it from your Media Library, or Insert from URL.

Whether you're using Google Sites, ExpressionEngine, or a service like Squarespace, the process to add together sound is going to be slightly different, so be certain to consult the visitor'south help documentation for full guidance.

Let Your Visitors Listen to MP3s With Ease

Using any of the above methods, your website visitors will now be able to listen to MP3 files through a media thespian with ease.

That said, you don't always need to use MP3 files. There are many other common audio formats, like WAV and FLAC, that yous can every bit play inline on your website.

The 10 Nigh Mutual Audio Formats: Which One Should You Utilize?

Read Side by side

About The Author

Joe Keeley (882 Articles Published)

Joe was born with a keyboard in his hands and immediately started writing about technology. He has a BA (Hons) in Business and is now a total-time freelance author who enjoys making tech uncomplicated for everyone.