April 4, 2009
How to Add Audio to a Site Build It! Page
If you are a Site Build It! owner looking to add a streaming audio player to your SBI! web site you are in the right place.
Ken Evoy
An example of something that isn't easy for the average computer user to do with his program is getting streaming audio to work from their SBI! website.
I produced five videos to share my knowledge on how I did it. After all, if you are going to build your own website with the Site Build It! site builder you might as well know how to add a streaming mp3 audio player to it.
Below each video are the website URLs that were referenced during the video.
NOTE: All links open up in new windows.
Video 1. This introductory video shows the mp3 audio player in action. It also visits the websites where the free software components are located to get audio up and running on an SBI! website.
The 1 Pixel Out Audio Player web site.
Adobe Flash Player Download page.
Video 2. This video explains how to install the Audacity sound recording software on your computer and how to set it up so it can output mp3 files.
Video 3. A short video on how to use Audacity to create a welcome message (with or without background music) and output it as an mp3 file.
The site that has the best written tutorials for Audacity is GuidesAndTutorials.com. They also have many other written tutorials covering other important subjects.
Visit GuidesAndTutorials.com website.
How to Podcast provides video tutorials covering Audacity in far greater detail than I was able to do with my tutorial.
Visit How-To-Podcast-Tutorial.com.
Video 4. This video shows how to customize the colors on the mp3 player.
The html code I used to customize my player to work on SBI! is contained in a small text file. Click on the link to get it. When the text file appears in a new window just copy/paste it into a new text document.
Click here for the HTML code to colorize the mp3 player.
Click here for the Hex code color chart.
Video 5. This video shows how to upload all the components to the SBI! server. It also shows how to write the code to embed the player on your home page.
Click here for the HTML Code for the Media and Support file uploads.
Thank you for watching the videos. If you still have questions about how to get an audio player to work on your Site Build It! website you can use the Contact Mark link at the top of this page and send an email to me and I'll do the best I can to answer it.
Subscribe to ComputerTipsandTools Today!
Comments on How to Add Audio to a Site Build It! Page »
Glad to see SBI now has a way to get into Podcasting.
Hi Dave,
Thanks for making a comment on this page.
SBI! doesn't really have a "Way" to get into Podcasting. This was a work-a-round I had to figure out to be able to get audio on a Site Build It site.
Regards,
Mark
Hi Mark,
Thank you for this fantastic tutorial for SBI sites. I'm in the process of creating a 3rd SBI site (on learning Spanish).
I will implement your tutorial steps for the initial greeting in the homepage. However, I also want to include "simple audio-player" buttons (something like the wimpy button) that plays and pauses audio files.
Is there a way to "program" the 1 pixel out player to do just that? Or is there a free alternative to the wimpy button that you would recommend?
Regards,
Jeff
Hi Jeff,
I'm glad my tutorials were helpful.
The 1PixelOut audio player that you are adding to your site already has the functionality that you are requesting.
When you initially start the player it opens and begins playing the audio. You may at any point in time click on the player and it will collapse and pause. If you click on the player again it will reopen and start playing from the point you originally paused at.
With the 1PixelOut player you can also drag the slider and move it anywhere on the time line that you want.
If you look at the top right corner of this web page you will notice a different kind of flash audio player that I use, it has three working buttons, a pause, a start and a stop button. Is that the kind of player you are looking to add to your site?
What that particular player lacks is the ability to move forward and backward to a specific point on a time line. That flash player wasn't free and I'm not sure what technical difficulties you would have trying to implement it into an SBI! site. I've never tried.
If you go online and search for flash audio player you'll find plenty of players, some free, some not. You may decide that spending $20 to $30 on a professional player is worth the investment. Considering what you are trying to do with your site a paid for player may be the only way to do what you want done.
I was just at the Wimpy audio player website and what their player can do is very impressive. Consider downloading the trial version of Wimpy and see if you can figure out how to use it.
If the Wimpy player works for you teach other SBIers how to use it but provide a Wimpy Affiliate link for them to click on so you can recoup your investment. Hmn, maybe I should do that too.
Regards,
Mark
G'day Mark,
I took the plunge and bought the advanced wimpy button (called WASP), which displays both FLV videos and audio.
I tried it out before purchasing, and managed to include 1 video player and 1 audio player button in a test page. However, audio players stop working when you include more than 1 per page. Only the latest 2 players work.
The wimpy player page has a support link, but it seems that the developer's policy is "build them and go to sleep", as I have not received a reply from the (insert angry word here) despite my 2 very polite requests for support.
So, I'm back to square one on this one.
All I need at the moment is the ability to place multiple audio player buttons on every page I need to, so that my visitors can hear how Spanish words are pronounced.
I am keen to try the 1 pixel out player, but I need to know if the feature that expands this player can be turned off. I don't want it expanded when it plays. Do you know how to do that?
Alternatively, you mentioned that the player in the upper right corner of your site is a paid player. Where did you get it from?
Regards,
Jeff
Hi Mark,
I finally added audio in my site using both the wimpy button, and the player you recommend (1pixelout).
The message in my homepage is only the 3rd attempt, and I know it sounds… artificial, and it doesn't flow on naturally, but I'm happy with the fact that I now know how to put the files together.
I will create a credits page in that site, and will definitely put a link there thank you for your guidance.
I've decided not to add any videos as yet. I'll do so when I'm finished uploading the main pages for all the sections.
Once again, Mark, thank you very much for your guidance.
I shall pay it forward too!
Regards,
Jeff
Hi Jeff,
You are doing a great job with your website.
I like your audio introduction and the 1PixelOut player looks great. The way you colorized the player matches your sites look perfectly.
I also like how you are using the Wimpy audio player. It makes perfect sense to use the Wimpy player with it's single button approach when sounding out vocabulary words. You might want to mention to visitors that they need to double-click on the Wimpy player to activate it. It took me a little while before I figured that one out. I'm a little slow.
Keep up the great work!
Mark
Hi Mark,
Very good – I can tell it will be helpful…however, I got into a glitch with the lame embed thing…it didn't download right and I have to go back over…and something with my zip files didn't work out…
If there were a way to make those downloads even more full proof…wow…but I'm going to give it another try…
Hi David,
If you are still having problems downloading the LAME Codec I'll be happy to download it myself and email it to you.
Just send an email to me at mark [@] computertipsandtools.com (Of course you need to remove the spaces and brackets from the email address.)
Regards,
Mark Hanson