Embedding sound on website!

**Titties** · 07-04-2005, 11:18 AM

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

**jscheuer1** · 07-04-2005, 12:15 PM

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.

**Titties** · 07-04-2005, 01:02 PM

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

**Titties** · 07-04-2005, 01:25 PM

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

thank you very much. That helped me alot

**jscheuer1** · 07-04-2005, 01:39 PM

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">

**Titties** · 07-04-2005, 01:44 PM

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

**jscheuer1** · 07-04-2005, 02:02 PM

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?

**Titties** · 07-04-2005, 02:12 PM

haha, the news will come..

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...

**mwinter** · 07-04-2005, 03:04 PM

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&#93;].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

**Titties** · 07-04-2005, 04:48 PM

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

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

Thread: Embedding sound on website!

Thread Tools

Search Thread

Embedding sound on website!

Bookmarks

Bookmarks

Posting Permissions