Embedding sound on website!

Printable View

07-04-2005, 11:18 AM
Titties

Embedding sound on website!

Hi

I am currently making my first website. I am making it from scratch and have designed an interface with photoshop, sliced it with imageready and so on.

The page is starting with a "Flash-like" site (script from DD) and the redirects to the page with all the contents.

I have embedded the Flash welcome site with a sound file, wich offcouse end when it is redirecting to the next site.

I used the

<EMBED src = "mymusicfile.mp3"
autostart=true
hidden = true>

Is there anyway that I can make the mp3 continue without disrupting?

currently i have devided the file into 2 parts. one part on flash welcome screen, and the next part on the frontpage.

visit http://titties.homepage.dk to see what i mean....

Again my question is:

"how to have only one music file on the flash site to be fading continuesly into the frontpage, without the interruption??"

pls help

Thx
07-04-2005, 12:15 PM
jscheuer1

Well, how familiar are you with frames? If you were to put the embedded sound on a separate page, lets call it sound.html:

<html>
<body>
<EMBED src = "mymusicfile.mp3"
autostart=true
hidden = true>
</body>
</html>

Then have a frameset with one frame taking up almost the entire page, put your intro in there (without the embed) and the sound page in a tiny 1px high frame. When the intro switches to the home page (from which you also have removed the embed), the music will still be playing in the tiny frame. When you jump from the home page to the other pages it links to, break out of the frames (give the links a target="_top"), the music will end and normal navigation of the site restored.
07-04-2005, 01:02 PM
Titties

Ok, I dont know anything about frames, but then i have to learn ;)

Ok, my home.html (the first page at all) is now liuke this:

<html>
<head>
</head>

<frameset rows="100%,1px">
<frame src="intro.html">
<frame src="sound.html">
</frameset>

</html>

so it now loads the intro flash page, and the sound page. and it works fine, as u can see http://titties.homepage.dk .

and it still plays the music while going from intro to homepage. but i didnt understand how to break out of the frame again.

when i have arrived to homepage, all the link: home, about me, nanotech, games and links, must be targeted with "_top", is that correct? how do I do that?

thx for helping me
07-04-2005, 01:25 PM
Titties

ah, i have found out.. nevermind...

thank you very much. That helped me alot :)
07-04-2005, 01:39 PM
jscheuer1

You'll want to look into some of the other attributes of frames to customize it more. Google 'frame tag attributes'. I'm thinking:

Code:

<frameset rows="100%,1px"> <frame frameborder="0" noresize="noresize" src="intro.html"> <frame frameborder="0" style="visibility:invisible;" noresize="noresize" src="sound.html"> </frameset>

Now, about breaking out, everywhere you have this:

Code:

<A HREF="about.html" . . .

put this:

Code:

<A HREF="about.html" target="_top" . . .

for each link, or just put this under the title:

Code:

<TITLE>Welcome to the home of Titties</TITLE> <base target="_top">
07-04-2005, 01:44 PM
Titties

yeah, thx.. that's what i figured out, the frame atributes and where to put targets..

But the one <base target="_top"> is much faster... :) smart^^

I really appriciate your help.

By the way, what do think of the page; design, layout and userfriendlyness, considered it is my first?

I know I still need all the contents :)
07-04-2005, 02:02 PM
jscheuer1

Very impressive for a first effort! I'd drop the scrolling no part, makes it so you can't scroll the home page. With the noresize and other attributes I suggested, I don't think you will need scrolling no but, you can keep it for the tiny frame.

There is an error in your code though for the rollovers:

Error: document[changeImages.arguments[i]] has no properties
Source File: http://titties.homepage.dk/front.html
Line: 21

I'm not sure how to fix that and the weird thing is that it works.

So where is the latest info on the comet impact? ;)
07-04-2005, 02:12 PM
Titties

haha, the news will come.. :p

hmm, well if it works i'll just let it be, casue i really dont know so much about scripting and html.. the rollovers was made with imageready, though i've altered them a bit.. and the sliding menu, splash intro scrips has been taken and altered from DD.. but all the photoshop'in was all me.. ;)

once again i thank u for the help.. it was killing me with the stop in music.. yeah, i know: I must find some other music... ;)
07-04-2005, 03:04 PM
mwinter

Quote:

Originally Posted by jscheuer1

Error: document[changeImages.arguments[i]] has no properties
Source File: http://titties.homepage.dk/front.html
Line: 21

I'm not sure how to fix that and the weird thing is that it works.

At the end of most (all?) of the calls to changeImages, there is a pair of arguments: 'Index_34' and 'images/Index_34-Index_About-Me_ove.jpg'. There is no image with the name or id attribute value, 'Index_34', so the browser throws an error. As it's always the last pair, everything that really needs to happen already has.

To the OP: surely you don't need all of the arguments that you provide to changeImages? I would have thought that two pairs would be sufficient - the first to change the hovered image, and the second the change the banner image.

Finally, a small change to changeImages:

Code:

function changeImages() { if(document.images && preloadFlag) { for (var i = 0, n = arguments.length; i < n; i += 2) { document.images[arguments[i]].src = arguments[i + 1]; } } }

You don't need to, and in fact shouldn't, access the arguments object by way of the function object. That was deprecated a long time ago (but still lingers around in old examples, unfortunately). Also, actually using the images collection is better than assuming that named images will be properties of the document object.

Good luck,
Mike
07-04-2005, 04:48 PM
Titties

ok Mike

I've now replaced

Code:

function changeImages() { if (document.images && (preloadFlag == true)) { for (var i=0; i<changeImages.arguments.length; i+=2) { document[changeImages.arguments[i]].src = changeImages.arguments[i+1];

with

Code:

function changeImages() { if(document.images && preloadFlag) { for (var i = 0, n = arguments.length; i < n; i += 2) { document.images[arguments[i]].src = arguments[i + 1];

in the front.html page as you said. Should this change be made within all the sub-sites???

I dont really understand what the difference is (or understand the code at all) hehe :rolleyes:

As i said the rollover and banner image changes was made with Imageready, because i am still completely uncapeable of making a site with just an empty notepad document *lol*

You said something about "no such image with the name or id attribute value(...), so the browser throws an error"

Does it mean that you aren't able to view the website proberly?

The index_34 is the image from the main design jpg file, in which i write contents (text, images etc.) of my page as you can see on line 259 in the source code.

Thx
07-04-2005, 07:54 PM
mwinter

Quote:

Originally Posted by Titties

Should this change be made within all the sub-sites???

I dont really understand what the difference is (or understand the code at all)

OK. The answer is yes, but you really don't need to worry about it. The changes are improvements, but if you don't want the hassle, don't bother. The advice was more for the future, along the lines of; what you did works, but here's how to do it better.

There is one thing that this shows though: it tends to be easier to manage scripts when you place them in external files, especially when they are used in more than one document. You would just need to change one file and the update affects anything that uses the script automatically.

Quote:

As i said the rollover and banner image changes was made with Imageready [...]

Sorry, I missed that.

Quote:

You said something about "no such image with the name or id attribute value(...), so the browser throws an error"

If you look at the img elements in the markup (for example, line 131) you'll see that some of them have a name attribute:

HTML Code:

<IMG NAME="Index_03" SRC="images/Index_03.jpg" WIDTH=490 HEIGHT=100 ALT="">

This attribute value can be used by a script to find an image within the document, and if you look at the changeImages calls, you'll see that 'Index_03' is the first argument. However, at the end of these calls, you'll also find 'Index_34' and a filename with the same name, but no img element within the markup has a matching name attribute so the script errors out when it tries to use something that doesn't exist.

Mike
07-04-2005, 08:02 PM
jscheuer1

Thanks again Mike. I just wanted to jump in here with another thought getting back to the use of the frameset - give the frameset page a title:

HTML Code:

<html> <head> <TITLE>Welcome to the home of Titties</TITLE> </head> <frameset rows="100%,1px" border="0" framespacing="0"> <frame frameborder="0" noresize="noresize" src="intro.html"> <frame frameborder="0" style="visibility:invisible;" noresize="noresize" src="sound.html"> </frameset> </html>
07-04-2005, 08:39 PM
Titties

Quote:

but if you don't want the hassle, don't bother

There's allways room for improvements :)

Quote:

it tends to be easier to manage scripts when you place them in external files

I have started to realise that, especially with the "slide-in" menu, which will be differing from subpage to subpage; here i can just refer to the same file with the .js extension. ehm javascript file^^

Ok, i can see that it must be making errors when it is referring to an element that doesnt exist... that would be kinda unlogical..

So the name attribute is a kind of a label/reference to an image within the code?
ie. when i have to use a picture/image severel times, then if i give it a name and the location folder/url for the image, then i can just give the name the second, third... n'th place i want to use that specific picture without the need of typing the location folder n times?
07-05-2005, 04:32 AM
jscheuer1

Quote:

So the name attribute is a kind of a label/reference to an image within the code?

Yes but, generally only in the javascript code. In html code you need to refer to the image's location. There are some special cases where these rules can be bent but, it is usually a bad idea. One should always bear in mind that some folks just won't/can't use javascript to view your page so, it is courteous to at least have the basic html code include an image wherever there is a spot for one.
07-06-2005, 12:35 PM
Titties

Quote:

it is courteous to at least have the basic html code include an image wherever there is a spot for one.

ok, i'll keep that in mind.

well guys, thank you for all your help. I really appriciate it..

Thanks :)