Thursday, September 12, 2013

Tutorial: How to Embed MP3 Audio Files in Weebly for Free.

**UPDATE:  A couple of days after I posted the following information, my audio players would not show up on my published page anymore!  They show up within the site editor, but not when I publish.  In the mean time, I am searching for a workaround...please comment below with a link to the information if any of you are able to find one.  Thanks!**
 
So, check it out.  If you are a Weebly user and are like me (on a budget), you probably use the FREE version of Weebly.  Yes?  I have been using Weebly since the whole Microsoft debacle and couldn't be happier.  Well, maybe a little.  Earlier this year (on my birthday, no less), along with some major price increases (you can read about those: here) Weebly rolled out some really cool features for the Weebly "Pro"users.  At the time, I saw no need for them.

Fast forward to September of 2013 and me offering my exceptional web design services (see: free) to my sister, and low and behold, mama needed some of those aforementioned Pro features that only the paid users of Weebly had access to.  My sister is a Voice Actor and she has a crap load of audio demo clips that need to be uploaded on to her site, so you can understand why I needed the ability to add audio.  For free.

Now, I can usually call upon my good friend, Google and find pretty much anything online.  Flexible footer workaround?  No problem.  Customized favicon? Check.  However, when you Google: "How to embed MP3 Audio Files in Weebly" some weird and totally non-helpful links appear.  So-called "free accounts", "trial accounts", etc.  The bottom line was I did not want to sign up for anything.  The following is a workaround on how to embed mp3 audio files into Weebly without being a paid Weebly Pro user.  Thank me later.  I mean, like if it works.

How to Embed a Quicktime Audio Player into the Free Version of Weebly

First off, I have a couple of sources to site.
I found the original code for the audio player on Design Shack, however, they cited their source as: O'Reilly Media.  The people at O'Reilly go into a lot more detail as to the why's and the how's.  Great for geekazoids like myself; everyone else: not so much.

That being said, I will try and make these step-by-step directions as easy as possible.  I mean, one could assume if you are down to alter some HTML/CSS code, you know your way around a computer.  Just in case, this will be easy peasy.

1.  Open Notepad (or something you can copy and paste into)
2.  Copy and Paste the following code into Notepad

<object height="42" width="300">
<param name="src" value="LINKHERE">
<param name="autoplay" value="false">
<param name="controller" value="true">
<param name="bgcolor" value="#FFFFFF">
<embed src="LINKHERE" autostart="false" loop="false" controller="true" bgcolor="#FFFFFF" height="42" width="300">
</object>

3.  Log into your Weebly account and launch the site editor
4.  Click on the "Design" tab
5.  Click "Edit HTML / CSS"
6.  Under "Files", click "Add new file(s)"
7.  Locate and Select the mp3 file you want to upload
Tip: if you have multiple files you want to add, hold "ctrl" down while selecting each one and you can upload them all at once.

Wait for the upload to finish and once it is done uploading, select the file by clicking on the file name.  Notice the name is probably something long from whatever the original file was called.  You may need to rename the file if it is super long, has spaces or punctuation.  For ease of use, I renamed all of the files I was working with.  If you need to rename the file click on the "Edit File Name" pencil icon and change the name to something much smaller.

For reference, my mp3 file name was: Culvers.mp3

This is the part where I had to get creative.  I needed to find out the exact file location name of my mp3 file in order to embed it into the code for the audio player.

This is what worked for me:
  1. Under the "Files" section, click on any image
  2. Right click on the actual image itself and select copy image location
  3. Go to your Notepad and paste what you just copied.  This is what showed up for me: http://www.weebly.com/uploads/1/2/9/1/12916600/custom_themes/220457269242630165/files/banner-short.jpg?1378966562195
  4. Now highlight everything after "files/" and delete it.  Remember, delete only the point after the /
  5. You will end up with something that looks like this: http://www.weebly.com/uploads/1/2/9/1/12916600/custom_themes/220457269242630165/files/ 
  6. Go back and Copy the entire name of your uploaded mp3 file
  7. Next, Paste it exactly where you deleted the previous text, be careful you do not erase any of the text you left there
  8. This is what my new url looked like after pasting my mp3 file name on the end of it: http://www.weebly.com/uploads/1/2/9/1/12916600/custom_themes/220457269242630165/files/Culvers.mp3
  9. Finally, select the entire thing and Copy it
  10. Hit Save in the site editor
The hard part is over, I promise.
  1. Go back to the first snippet of code you pasted in Notepad
  2. Select the first LINKHERE portion of text (be sure to leave the two quotation marks)
  3. Paste what you just copied in BETWEEN the quotation marks
  4. Select the second LINKHERE portion of text (again, leave the quotation marks)
  5. Paste the file name again
BEFORE:
<object height="42" width="300">
<param name="src" value="LINKHERE">
<param name="autoplay" value="false">
<param name="controller" value="true">
<param name="bgcolor" value="#FFFFFF">
<embed src="LINKHERE" autostart="false" loop="false" controller="true" bgcolor="#FFFFFF" height="42" width="300">
</object>

AFTER:
<object height="42" width="300">
<param name="src" value="http://www.weebly.com/uploads/1/2/9/1/12916600/custom_themes/220457269242630165/files/Culvers.mp3">
<param name="autoplay" value="false">
<param name="controller" value="true">
<param name="bgcolor" value="#FFFFFF">
<embed src="http://www.weebly.com/uploads/1/2/9/1/12916600/custom_themes/220457269242630165/files/Culvers.mp3" autostart="false" loop="false" controller="true" bgcolor="#FFFFFF" height="42" width="300">

At this point, you can adjust other settings like height, width, auto play/start, color and loop to your liking.  I left my settings alone.
  1. Copy the entire code you just edited
  2. Select, "Build"
  3. Scroll down to the "More" section and select, "Embed Code"
  4. Drop the embed code where you want the audio player to appear on your site
  5. Click on the "Click to set custom HTML" 
  6. Paste your new code into the box
Voila!  You are done, my friend.  Now Publish your site and test out your new, free embedded audio player.  Mine took a few seconds to load, but it happens automatically while your page is loading.  For free, I am not going to complain!

This is a partial screenshot of what my sister's page looked like when I was done adding all of her voice over demos:



Fair to say, I tested it out on the Firefox, Google and Chrome browsers.  Chrome was the only one that gave me issues.  I am thinking it could have something to do with Weebly's announcement last week regarding the new Weebly dashboard for Chrome.

Does it look as nice as the one available in-house with a paid Weebly Pro subscription?  Nope.  What you get is a simple and basic player.  Nothing fancy.  No title or clip length information like the one Weebly offers.  Would it be easier to just pay for the Weebly Pro service?  Probably.  Am I going to?  Not yet.  I am, however, kind of kicking myself for missing the whole grandfathering into the previous price point situation.  Also, I read through Weebly's TOS agreement and could not find anything saying this is not allowed.  However, I urge you to read it for yourself and use this code at your own risk.

I hope this tutorial helps you guys.  Please leave a comment and let me know if you try this and it works, or if it gives you any problems.  If you have a better workaround, please post the link so we can all check it out.


9 comments:

  1. I was so excited to find this how-to, but when I tried it...it didn't work. :( I tried several times, following the directions to a tee, but it just wouldn't work. I'm using Firefox, btw. Any thoughts on why it might not be working for me? Any help is appreciated!

    ReplyDelete
    Replies
    1. Hi - The weird thing is....literally within a couple of days after publishing this, my audio players would not show up on my published page anymore! They show up within the site editor, but not when I publish. It is possible that Weebly updated something on their end and it caused the code to not work properly. I am searching for a workaround...please let me know if you find one.

      Delete
  2. Replies
    1. Thanks! Were you able to get it to work? For some reason, the workaround is no longer working for me. I am using a PC w/ Firefox, so that may be the issue. It seems to function properly using Safari, though.

      Delete
  3. WOW!! terribly informative web log and helpful techniques. Please visit this web site if you wish a lot of detail
    access Bee MP3 in UK

    ReplyDelete
  4. does this work for weebly basic? i couldn't find "open file" anywhere there. pls advise. regina.

    ReplyDelete
  5. Your this blog is very informative and interesting. Keep doing this type of great work.
    access Bee MP3 in UK

    ReplyDelete
  6. Hello there! I have a question. I did everything you said and the icon player is cut, then I can not see the complete icon , how can i fix it?

    ReplyDelete