How to Make a Website that plays Audio files (.mp3, .wav, etc.)

how to make a website that plays audio files

In this tutorial, we’ll show you how to make a website that plays audio files such as .mp3, .wav, etc.  This is ideal for posting lectures, sermons, or music so that your listeners can peruse through and listen to the files you have made available to them.  In this step-by-step guide, we’ll use the IconoSites website builder where anyone can build a website in minutes.

(Note: If you don’t want to use the professional music player in this example, you can simply upload your audio file and link to it  (It will open a new page, and play the audio file once you click on it).  To do this, skip steps 1&2 below, and just complete steps 3-10.)

1.  Login to your IconoSites free website builder account, and go to your Header & Footer section.

how to add google analytics to your website

2.  Scroll down the page to the Site Wide Scripts feature.  Then, in the BODY section, copy & paste this exact code:  <script type=”text/javascript” src=”https://webplayer.yahooapis.com/player.js”></script> .  See screenshot below.

3.  Then, locate the web page that you would like to add an Audio file to, and click Edit.   Scroll down to Your Page Content, and add some text into the Editor to describe your audio file.   Then, highlight that text and click on the Create Hyperlink button.  See screenshot below.

make a website

4.  Then, when the “insert/edit hyperlink”  window pops up, click on the Browse button.  See screenshot below.

Pdf on website

5.  Click the disc icon button to add your audio file.  See screenshot.

Pdf in website

6.  Then click the Choose File button.

How to add a pdf onto your website

7.  Then, locate the audio file you would like to upload.

Add pdf to website

8.  Once the document file is uploaded, select and double click the uploaded file.

9.  Click the Insert button.

Pdf in website

10.  Lastly click SAVE button to finish.

make a website that plays mp3 files

11.  Now, when people click on the link to play your audio file, a professional audio player will appear that immediately plays the file and allows the user to control it.  See screenshot below.

how to make a website that plays audio files


 

  • Laurie

    I have a Yoga website and I chose this web page makerto create my website for free, I have used almost every tutorial you have posted here and this one is my favorite!!! Everytime somebody visits my site they can hear a really nice melody and start relaxing while browsing my site, I love listening to music when I surf a website and I am very excited to have music in mine.

    • Bob Charles

      This is just a great music player to add when you make a website.  It gives your visitor so many different options, such as toggling between different audio files.  Also, if you have multiple audio files on your web page, it will automatically play them in order (i.e. when one stops, the next one starts).  Just another tool to use when you create a website with our website builder.

  • Bob

    Having audio on a website is the ultimate way to make it really welcoming, at least for  my website it worked great, I added the audio two days ago using this tutorial and it was really easy to do since I already had the file I needed, you really do share good information on how to make a webpage the best it can be. 

    • Bob Charles

      The one thing to always remember when you first create a website, is to not bombard your visitors with annoying music. Too many entrepreneurs make this mistake when they launch their free business website for the first time.  Instead, build a website with soothing background music that is barely noticeable AND make sure it is easy to turn off, should your visitor want to do so.  

      • Angie

         I totally agree, I´ve been in too many websites that have annoying music, and its really distasteful, but depending on the purpose of the page and the music it can also be a good thing, one must be careful and know how to create a website that provides the right environment for the visitor to get in a certain mood, to relax or to be more alert.

  • Adan Herrera

    At first I wasn’t sure to add sound the website since most sites I visit I tend to turn off the sound, after reading the comment I decided to go for it and I like it a lot, I have a simple track that is very easy to switch off and on and I had some great feedback from visitors, this is a great free website builder cause I think is the only one that gives you this kind of tutorials to actually create a great site.

    • Bob Charles

      My only advice is to just try to keep it tasteful.  When you build a website, you might add music that sounds good and pleasing to you but it could really annoy your visitors.  Visitors can get preoccupied with trying to figure out how to just shut the music off, which takes their focus off your products and services.  This is terrible and you want to avoid this at all costs.  This is why you barely see music on websites anymore. Many people believe that it is so hard to add music that everyone finds appealing, that it is just not worth the risk to add it at all.

  • Lindsay Amber

    I play in a band and I manage the site but till like two month ago I had no idea of how to create a website and adding features like this was like trying to climb a big mountain, but today I added some samples of our songs thanks to you and it went amazing, I hope our visitors can listen to the samples and like it, I hope more people would go to our concerts and buy our material.

    • Bob Charles

      This is the perfect tool for a band.  The fact that you can add your mp3 files right up onto your free website and then have a professional way for your visitors to interact with them can be especially useful.  Just remember that when you make a website with music, go easy on the song you choose when people enter the website.  Different than some of our comments below, it definitely is more appropriate to have music play on your website if you are actually a band in the business of selling music.

  • Randy

    I´m hoping I ca find the appropriate music for my site since it would be great in it, in these site builder I´ve really learned how to make a website and a good one, my visits here have been very productive. 

  • Megan Greene

    This is great for my website! I have a site designed for children to get in and read  short stories with their parents, having music on it will make it so much better, I wondered for some time if any webpage maker provided some services like this one and fortunately I found this one today, and is free. 

  • Randy Black

    Hi Bob I just wanted to ask if I can place the audio player on the right side of the screen or do you think that the default setting is better? As a web page maker what is your opinion?

Previous post:

Next post: