Midis & Sound

Midis & Sound

Ok.. onto some more fun stuff!!!.. you know... it use to be that while I was working and surfing pages.. I'd have the stereo on, listening to music.. but these days.. you can find some fantastic stuff on the web! Why not incorporate it onto your pages?!?!?!?!?!?! Now I'm am NOT abou t to get into Real Audio or anything like that.. I'm only gonna get into the basics of sound here.. cause there are just some pages that BEG for sound!

Let's start with a very basic run down on certain sound files here

midi

waves

au

and there's probably some more.. but I just can't remember them *sorry I'm human sometimes*

Now.. out of all of these midi's are the most popular to put onto a page.. and there's a good reason for it.. great music .. and fairly easy to load.. the wav and the au are TOO big to load reasonably. NO BODY wants to wait around 2-5 minutes waiting for something to load.. no matter HOW good it is.. *keep that in mind folks* Midi's only supply music.. you want voice as well as music? or just voice? then that's where you get the wav and the au. Wav's and au's are typically shorter in duration than midi's.. but they vary in lenght of downloading time.. I've seen some wavs that are 1000KB and up to download.. talk about waiting! *YIKES* .. ok.. so I guess you know where my preferences lay.

Let's get right down to the basics shall we? Let's take this first example of a homepage *yup.. that link meant GO CHECK IT OUT!* .. it's ok.. kind of plain... nothing spetacular.. nothing really to urge you on too much.. it's just there.. Now .. check the same page again in example two. NOW you have something that kind of urges you to check things out just a little bit further.. the MUSIC! *I think I made my point... hope so at least.. LOL*

Guess the next step here is HOW to get that to happen.. well besides picking out music.. *individual tastes apply* that would leave.. how to get it onto the page! For that.. we're gonna make this VERY VERY simple. The following code will give you what is EXACTLY in my second example:

<bgsound src="tom.mid" loop=3>
<embed src="tom.mid" width="4" height="4" autostart="true" loop="3">

What does all that mean? Good question... I forget half the time myself.. so here goes..

There are two parts to the statement:

<bgsound src="tom.mid" loop=3> This first part tells the browser that there is a background sound source.. with it playing 3 times.

<embed src="tom.mid" width="4" height="4" autostart="true" loop="3"> This second part of the statement tells the browser to embed the sound source with something that is 4X4 pixels.. it is to start automatically when the page loads.. and that it is to once again loop only 3 times

Well that's pretty cool! So let's go a little bit farther along here.. anywhere you have a 'true' statement.. you can also have a false statement in there. .. Meaning.. that if I change the *autostart=true* to *autostart=false* .. a person will have to manually turn the midi on. (This goes for any statement that says either true or false.. it has to be one or the other). Anywhere where you have a number.. you can change that number! If we can have it loop as many times as we like.. or we can have it loop only once.

There are only two things that are really in question with the code for this:

you HAVE to have both statements. IF for some reason you leave the first one off.. you'll be able to hear it in Microsoft Explorer.. but you will NOT be able to hear it in Netscape *bye bye audience* So it is VERY important to have BOTH parts of the statement.

If you look up at the code.. you'll see the "height" and "width" in there.. both set currently at "4". That number can be changed. That is no problem.

by not setting a value there *meaning you set it to "0"* then that 'criples' some viewers.. by not allowing them a means of turning it off.. short of turning their sound totally off.

Also by setting the values to 0.. you set yourself up for a longer time to wait for the page to load.. If you've read the images page.. then you'll understand that it's imporant to allow a certain space for things to load into.. and the same includes sounds on a page. Without that specific space.. if you have a large midi.. your audience is stuck there..waiting for it to load.

Now I know everyone has seen the 'boxes' on people's pages with all the cool buttons.. that allow you to rewind the midi.. stop the midi.. etc.. how to get those? We simply make our height and width .. bigger and wider.. such as this..
<bgsound src="tom.mid" loop=3>
<embed src="tom.mid" width="145" height="60" autostart="false" loop="3">

Now.. we've got this box.. it's just sitting there.. playing a song.. and you know what? it's kind of ugly! (that's why alot of people do the smaller measurements) .. but there are times when, I think, you need the entire thing.. but how to fix it.. so it looks better... this is when other HTML skills come in handy.. and some imagination!.. One of my favorite things to do.. when I have a midi.. where I have the entire box.. is to frame it.. (oh man! I really hate giving away my stuff! do I gotta???? *pouting*) .. but how? with a table!!!! It's PERFECT!.. watch:

Well.. on with the lesson.. guess the next question is.. about wav's and au's *probably not so much the au's* .. it's really simple.. the set up is almost the same as with a midi.. you can't go wrong if you follow the midi formula..:

Well folks.. that's it.. that's as complicated as midis and sounds get.. I suppose they could get more complicated.. putting multiple midis on a page.. and things like that.. but you should really ask yourself one question.. why? If you have an answer to that one.. I'd REALLY love to hear from you.

UPDATE: September 14, 1997

Well folks I figured out one little flaw in the midi section of this page, it's not a major one, but it could be. Many people download different plugins for their browsers, such as Crescendo. *I know I do!* Well, because I have usually worked with Netscape 3.0, *although I have checked things often in the higher browsers* I wasn't aware of this one little detail. If you have Netscape Communicator OR Netscape 3.02 with Crescendo installed then you NEED to add this particular code to your midi coding or you will NOT hear the midi playing unless you manually turn the volume on. So even if you don't have the additional plugins installed, it would be a good idea to add this in.. or you'll have some of your audience listening to nothing while your midi is playing....

As you can see I added in the "Volume=50%" part of it. Now that percentage number can be changed to anything that you like, but keep in mind that if the music is not the main part of your page, then put it at 25-50%, but if it's what you want people to pay attention to, then go ahead and put it at 100%.

Just thought I should keep you updated on the little tricks that are going on with the different browser and plugin wars.. just so the viewer can still enjoy things.

Update: 5/2/98
Well, I finally found amidi jukebox type of thing.. it involves Java and meta refresh, and am not about to attemt to explain it, because I don't understand half of it.. just the basics.. *grin* But rather then explain it.. check here for an example of it, and the coding for it. Taualph's homepage. Enjoy it! =)