Using Web Audio for
Site Build It!

Using web audio on your web site is easy to do. And there are good products to use for this. I like SonicMemo, because of the cost and quality. It's a one time purchase, no other monthly fees.

It is a simple process, and to use with Site Build It! sites, I've developed this page to help explain the steps.

  try this Paul

I needed to add this text link tied to sound file, to tell SBI the sound file has to be uploaded. Didn't work till I did this. The graphic and support file was uploaded, but not the mp3. When I made the above "text link" tied to the mp3 (with Dreamweaver, I choose "modify" and "make link" then chose the mp3 file.) SBI then knew to upload the mp3. Once the mp3 is uploaded, I can get rid of the text link.


You will need to follow the instructions as explained in "upload your own html page" in SiteCentral. As the instructions tell you, create a folder called something like "yourdomain.com."

Then create subfolders within that folder called "media-files" and "support-files" and "image-files." (Also explained in SiteCentral.)

Now, to get the Sonic Memo files in the right place, follow these 3 steps....

  • In the main folder, ("yourdomain.com") save the "sample_page.html" that comes with SonicMemo.
  • From the "smplayers" folder in Sonic Memo, copy the 46 files that start with "a_sm" and end with ".swf" and paste into your "support-files" folder.
  • From the "images" folder in Sonic Memo, copy the graphics and paste into your "image-files" folder.

At this point, (with a couple notes below) you just need to follow Sonic Memo directions.

 

 

1. Record or find an MP3 file to use.

You must be able to record your own MP3 file. Provided with the SonicMemo documentation, are some suggestions of sound recorders to use. On my PC, I use Audio Record Wizard, which limits you to 3 minutes of recording time for the free version. Registering (for unlimited recording) is $24.95. With the free version you can make any number of recordings, as long as none are over 3 minutes. I found this through SonicMomo's suggestions, and there are more for MAC and PC.

Record your sound file as .mp3. Save it as a name that will remind you what it is e.g. "welcome.mp3." And save it to the "media-files" folder.

----
You will need to upload the mp3 sound files and the player files to your site. This will be done when you upload your page to your site.

It doesn't matter where your sound files are located, as long as they are somewhere on one of your sites, SBI or not.

I put them on an page in my SBI site. And that page is really only used for the sound files.

Open the file sample.html in your HTML editor and look about 30 lines from the top for this line:
(put a Sonic Memo audio control here)
Replace that line in the file with the code that you just copied and save the sample.html file.

Note: In order for the mp3 file to be uploaded when you build your page, you must create a text link that points to the sound file. The generated code by itself will not tell SBI to upload the sound file. So, you would create a link like this: sound file, and make that a link to the sound file you created. If you click on the above link, the sound will probably play in something like "Real Player." But, you want the buttons to be the controls:

 

Once the page is uploaded, the sound file will be stored, and you can get rid of that text link if desired. But, that is why I put the sound files all on a separate page, one that would not be viewed by visitors, and is only used to upload the mp3 and the player buttons.

This way, when you upload your page, the sound and the player files will be stored correctly on your SBI site. Then you can just reference them from the appropriate page, by adding the generated code to the appropriate page, as explained below.

Note: I just add to the column on the right side of the page, (of "sample_page.html," making a column of all the sound files I want to use. When previewing in a browser, it will appear as a set of "play" buttons, as shown below, as chosen when you generated the code with SonicMemo.

 

Alternatively, you can build the sound files directly into the page where you want the sound. But if the sound files are loaded on a separate page, using a text link, the generated code can be placed on any page of your site that was created with SiteBuilder. You only need one html editor created page to store all of your sound files. The rest of your site can be built with SiteBuilder.

If you add the sound directly to the page that your visitor goes to, you must create a text link to the sound file, at least till the page is uploaded once, and the sound file is stored correctly with SBI.

After you have completed the steps above to record and upload your sound files, you are ready to add the sound to any of your pages. Just follow the steps below.....


To add Sound to your site:

1. Double-click the file sonicmemo.html to open it in your web browser and when the title screen comes up, and as Jay Jennings says, gaze with rapture at the cool logo and then click the Continue button. You'll come to the following screen....

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. On the main screen look toward the bottom and click on the Advanced Preferences… link to go to a new screen.

3. Change your preferences....

In the above graphic, from the "advanced preferences," you will need to change the default "smplayers" to "support-files" (without the quotes.)
And change "mp3files" to "media-files" (without the quotes.) Once you make those 2 changes, you shouldn't need to change it again - it will be your default. Click "OK."

4. You should be back at the main screen and all you have to do is fill in a blank (with the name of your mp3 file) and set a couple options so the screen looks like this:

5. Now click the Generate Code button and copy the generated code from the text box at the bottom. (Technical note: Some systems have a problem copying text from a Flash program using the options under the Edit menu. In that case, right-click (Mac users control-click) on the text, choose Select All from the pop-up menu, and then right-click (Mac users control-click) again and choose Copy.)

6. Open the page where you want the sound buttons to appear. Either a page built with SiteBuilder, or use your own HTML Editor. Paste the code that you just copied onto the page. "Build" the page, and you're ready to go!