May 22, 2001 - Sharing Sound among Frames | WebReference

May 22, 2001 - Sharing Sound among Frames

Yehuda Shiran May 22, 2001
Sharing Sound among Frames
Tips: May 2001

Yehuda Shiran, Ph.D.
Doc JavaScript

In some of your applications you may need to use Flash Audio and JavaScript directly, without any prepackaged APIs such as FlashSound JavaScript API. You will enjoy more features, methods, and properties, but you'll have to take care of all the tiny details that are taken for granted when using FlashSound API.

One of these "tiny" details is embedding the sound track on each and every page you want to sonify. This may become a nightmare for maintenance, once you want to change the embedded track on all pages. Another way to embed a sound track is to use an invisible frame for the sound, and change only the visible frame. In this way, we have a site that includes two frames: one fixed frame with the embedded SWFs, and one frame that hosts the regular site's Web pages. When we jump from this frame to another Web page, the new page positions itself in the same frame under the same frameset. All Web site's pages access the same Flash sound object in the invisible frame. In this way, you maintain the sound embedding in a single file, serving all Web site's pages.

Let's see these frames in a demo. Our invisible frame is called swf, and it includes the hello() function:

function hello() {
  alert("Hello World");
}

Click here to see a page with two frames, one invisible and one visible. The FRAMESET frame is mostly straightforward:

<HTML>
<HEAD>
<TITLE>Flash sound with Frames</title>
</HEAD>
<FRAMESET FRAMESPACING="0" BORDER="false" ROWS="1,*" FRAMEBORDER="0">
  <FRAME NAME="swf" SCROLLING="no" NORESIZE TARGET="main" SRC="010522b.html"
  MARGINWIDTH="1" MARGINHEIGHT="1">
  <FRAME NAME="main" src="010522c.html" scrolling="auto">
  <NOFRAMES>
  <BODY>
  <P>This page uses frames, but your browser doesn't support them.</P>
  </BODY>
  </NOFRAMES>
</FRAMESET>
</HTML>

This is the code for the invisible frame:

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="flashsoundcheck.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
function hello() {
  alert("Hello World");
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
  if (window == top) top.location.href = "010522a.html";
// -->
</SCRIPT>
<TITLE>INVISIBLE FRAME</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
  Flash_embedSWF("animalsounds.swf");
</SCRIPT>
</BODY>
</HTML>

Notice that all sound operations are included in the JavaScript code. Functions are defined in the external script flashsoundcheck.js. This is the code for the visible frame:

<HTML>
<HEAD>
<TITLE>VISIBLE FRAME</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
  if (window == top) top.location.href = "010522a.html";
// -->
</SCRIPT>
</HEAD>
<BODY>
<P>Hello World. This is 010522c.html.</P>
<A HREF="javascript://" onclick="top.swf.hello()">Hello from Invisible</A>
<P>
<A HREF="010522d.html">Next</a><P>
|
<A href="javascript://" onclick="top.swf.sonified_flash(10); return false">Dog Barking</a> |
<A href="javascript://" onclick="top.swf.sonified_flash(30); return false">Frog Ribbet</a> |
<A href="javascript://" onclick="top.swf.sonified_flash(60); return false">Horse Whinny</a> |
<A href="javascript://" onclick="top.swf.sonified_flash(80); return false">Cat meow</a> |
</BODY>
</HTML>

And this is the code for another visible frame:

<HTML>
<HEAD>
<TITLE>VISIBLE FRAME</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
  if (window == top) top.location.href = "010522a.html";
// -->
</SCRIPT>
</HEAD>
<BODY>
<P>Hello World. This is 010522d.html.</P>
<A HREF="javascript://" onclick="top.swf.hello()">Hello from Invisible</a>
</BODY>
</HTML>