Using JavaScript to embed a web sound with flash

Source: Internet
Author: User
Tags object continue implement modify numeric value version
Javascript| Web Page This javascipt tutorial will let you feel the flash brings you the infinite charm of the sound world. Before I begin this tutorial, let me introduce what this tutorial involves: Hide embedded swf, stream-synchronized SWF, start stream from specified frame, stop and play stream, check whether track is playing, check whether the player is ready, check the percentage of SwF reprint, verify that the SWF is fully loaded, Check the player version number, set the minimum player version number, clear the error message, and so on. OK, let's start our tutorial.

  Hide the embedded SWF

The Flashsound JavaScript API inserts a Flashsound object into the Web page, along with the embedSWF () method. But why can't we see the object on the Web page? Oh, it turns out that flashsound hides this object. In an Internet browser, Flashsound is the object that becomes transparent, meaning you don't see the object, but it actually exists. In Netscape's browser, the object's color is assigned the same color as the Web page, so you can't see it. You can set the color of the object in Netscape browser by using the bgcolor property. Both of these methods are the core of hidden objects. Here's my code to play the scale.swf file when the mouse moves over the object, so we create the Flashsound object:

<SCRIPT>

Mysoundobj.bgcolor = "#0000ff";

mysoundobj.embedswf ("scale.swf");

</SCRIPT>

The following code allows you to see a small point under "play a Scale" in Netscape's browser, which is exactly the flashsound we created, because at this point it is not the same color as the background of the page, look at the code:

<HTML>

<HEAD>

<script src= "Flashsound.js" ></SCRIPT>

<SCRIPT>

var mysoundobj = new Flashsound ();

</SCRIPT>

</HEAD>

<BODY>

<p><a href= "javascript://"

>

Play a scale</a>

<SCRIPT>

Mysoundobj.bgcolor = "#0000ff";

mysoundobj.embedswf ("scale.swf");

</SCRIPT>

  SWF for playback stream synchronization

The Flash file format supports four types of synchronization: event (events), start stop (stop), and Stream (stream). Event synchronization allows you to play multiple tracks at the same time; Starting a sync prevents parallel tracks from playing; stopping the sync is stopping the track playing, while the stream sync sound contains the frame dimension style of the sound, which can be played repeatedly and seamlessly. Unlike other real-world streaming sound formats (such as true Audio), flash streaming files are loaded into the browser as they are played. When the playback is finished, the streaming sound is all loaded into the browser's height buffer. So the next playback is the source and the browser tells the buffer, not from the Web page.

The following connection is playing a stream synchronization, which explains the Flashsound JavaScript API, as follows:

<HTML>

<HEAD>

<script src= "Flashsound.js" ></SCRIPT>

<SCRIPT>

var mysoundobj = new Flashsound ();

</SCRIPT>

</HEAD>

<BODY>

<SCRIPT>

mysoundobj.embedswf ("earsonly.swf");

</SCRIPT>

</BODY>

</HTML>

It is noteworthy that the Flash sound is set in the Flash editor to start playing automatically.
Start streaming Flashsound the JavaScript API from the specified frame to support the ability to randomly access any frame in a track like a CD player. So you can specify any frame to play the sound you like.

The four connections shown in Figure 1 are connected to a typical CD player Control Panel, the first connection is back to the first frame, the second connection starts at frame 100th, the third is played from frame No. 200, and the fourth connection pauses all playback.

(Figure 1)

The detailed code is as follows:

<HTML>

<HEAD>

<script src= "Flashsound.js" ></SCRIPT>

<SCRIPT>

var mysoundobj = new Flashsound ();

</SCRIPT>

</HEAD>

<BODY>

<a href= "javascript://"

>

Play from frame 1th </A>

<a href= "javascript://"

>

Play from frame 1000th </A>

<a href= "javascript://"

>

Play from frame No. 200 </A>;

<a href= "javascript://"

>

Pause </A><

<SCRIPT>

Mysoundobj.autostart = false;

mysoundobj.embedswf ("earsonly.swf");

</SCRIPT>

</BODY>

</HTML>

Here we set Autostart (auto start playback) to Flase. This example is a good illustration of how we can use JavaScript to overload flash behavior.

  Stop and Play stream

The Flashsound JavaScript API supports a method that is equivalent to pausing, that is, Tstopplay (). This Tstopplay () method has one parameter, the timeline (timeline). We can use the "/" (backslash) to specify the main timeline. Tstopplay () can stop playing forward on the timeline you specify, but not replay it. It is worth noting that this tstopplay () method can only stop the playback of the sound set to stream synchronization, not the playback of the sound that is set to time or start synchronizing.

Similarly, the Flashsound JavaScript API page supports the method equivalent to playback, that is, Tplay (). This Tplay () method also has a parameter and is also a timeline. Similarly, we can use "/" to specify the main timeline. The Tplay () can start playing on the timeline (the parameters passed to Tplay ()) at the frame where the Tstopplay () stops playing, or start at the first frame. The Tplay () method can also start playing a sound that is set to stream synchronization, or a sound that is set to time synchronization or start synchronizing.

(Figure 2)

The three connections shown in Figure 2 are connected to a typical tape recorder control panel. The first connection uses Tgotoandplay () to replay, the second connection uses Tstopplay () to pause playback, and the third connection uses Tplay to continue playing the sound that is paused somewhere. The detailed code is as follows: <HTML>

<HEAD>

<script src= "Flashsound.js" ></SCRIPT>

<SCRIPT>

var mysoundobj = new Flashsound ();

</SCRIPT>

</HEAD>

<BODY>

<a href= "javascript://" >

Start playback again </A>

<a href= "javascript://" >

Pause Playback </A>

<a href= "javascript://" >

Continue playing </A>

<SCRIPT>

Mysoundobj.autostart = false;

mysoundobj.embedswf ("earsonly.swf");

</SCRIPT>

</BODY>

</HTML>

Check that the track is playing Flashsound JavaScript API can let you check whether the track is playing, in order to do this it provides the IsPlaying () method. This isplaying () method does not have any arguments, it returns True (true) only when the track is playing, or false (false). So you can use this method to create examples where you can play sounds on another track without the sound track playing, which is easy to implement.

The first three connections shown in Figure 3 are connected to a typical tape recorder control panel. And the right side of the connection is to check whether there is a track in time to play. When you move the mouse over it, we can get the "play" answer. In Figure 3, the connection to the second row is to play a scale music, but it only plays when the tutorial music is not playing, and for that purpose, we check that the value of the isplaying () for the tutorial music is false. This tutorial music object is mySoundObj1, and scale music object is MYSOUNDOBJ2, so the statement that implements the above function should be:

if (!mysoundobj1.isplaying ()) mysoundobj2.tgotoandplay ('/scale-event ', ' start ')

Well, we can try our connections. First start playing our tutorial music, stop the tutorial music to play scale music, and then continue the tutorial music, at which point you will find scale music stopped.

(Figure 3)

The specific source code is as follows:

<HTML>

<HEAD>

<script src= "Flashsound.js" ></SCRIPT>

<SCRIPT>

var mySoundObj1 = new Flashsound ();

var mySoundObj2 = new Flashsound ();

</SCRIPT>

</HEAD>

<BODY>

<p><a href= "javascript://"

> Play Tutorials Music </A>

<a href= "javascript://"

> Pause Playback </A>

<a href= "javascript://"

> Continue playing </A>

<a href= "javascript://"

> whether to play </A></P>

<a href= "javascript://"

> Play scale Music </A></P>

<SCRIPT>

Mysoundobj1.autostart = false;

mysoundobj1.embedswf ("earsonly.swf");

mysoundobj2.embedswf ("scale.swf");

</SCRIPT>

</BODY>

</HTML>

  Check to see if the player is ready.

The Isplayerready () method of the Flashsound JavaScript API returns True (truth value) when the browser recognizes the player and the Javascrip object and the SWF is loaded on at least one frame. If this is not the case, return false. The Flashsound API executes this method before all other API method calls, so you don't have to worry about using it more than once. But when you call a Flash method, you must use Isplayerready (), because the Flash method is not part of the Flashsound Jascript API.

As shown in Figure 4, the connection is to play a flash stream track, which plays a tutorial music on the Flashsound. We can add two statements to implement the first one, before embedding the tutorial music, we print out the value of Isplayready (), and the second is to print out the value of Isplayerready () after embedding the tutorial SWF. So we can look at these two differences, from the printed result we can find: Before embedding the tutorial music, the value of Isplayready () is false, and after the tutorial music is embedded, the value is true.

(Figure 4)

The following is a detailed code:

<HTML>

<HEAD>

<script src= "Flashsound.js" ></SCRIPT>

<SCRIPT>

var mysoundobj = new Flashsound ();

</SCRIPT>

</HEAD>

<BODY>

<p><a href= "javascript://"

> Play Tutorials Music </A>

<a href= "javascript://"

> Pause Playback </A>

<a href= "javascript://"

> Continue playing </A>

<a href= "javascript://"

> whether to play </A></P>

<SCRIPT>

Alert ("Before embedding, Isplayerready () returns" +

Mysoundobj.isplayerready ());

Mysoundobj.autostart = false;

mysoundobj.embedswf ("earsonly.swf");

Alert ("After embedding, Isplayerready () returns" +

Mysoundobj.isplayerready ());

</SCRIPT>

</BODY>

</HTML>

Check the percentage of SwF reprint Flashsound the JavaScript API's percentloaded () method returns the percentage of the SWF loaded to the browser. This value can be any value from 0 to 100. This value will be less than or equal to 100 if you load a SWF (including, of course, a stream-synchronized track) to a Web page.

Click on the connection shown in Figure 5 to play a flash stream track, which is a flashsound tutorial music. We only need to modify two statements for the above code statement. The first is to print out the value of percentloaded () before embedding the tutorial music, and the second to print the value after embedding the tutorial music swf. As you can see from the results: before embedding the tutorial music, the value of percentloaded () is 0, and after the embedded tutorial music is finished, this value is 100.

(Figure 5)

Here is the specific code:

<HTML>

<HEAD>

<script src= "Flashsound.js" ></SCRIPT>

<SCRIPT>

var mysoundobj = new Flashsound ();

</SCRIPT>

</HEAD>

<BODY>

<p><a href= "javascript://"

> Play Tutorials Music </A>

<a href= "javascript://"

> Pause Playback </A>

<a href= "javascript://"

> Continue playing </A>

<a href= "javascript://"

> whether to play </A></P>

<SCRIPT>

Alert ("Before embedding, percentloaded () returns" +

Mysoundobj.percentloaded ());

Mysoundobj.autostart = false;

mysoundobj.embedswf ("earsonly.swf");

Alert ("After embedding, percentloaded () returns" +

Mysoundobj.percentloaded ());

</SCRIPT>

</BODY>

</HTML>

  Verify that the SWF is fully loaded.

The tloaded method of the Flashsound JavaScript API returns whether the SWF is fully loaded into the browser. This value can be either false or true. When you embed your SWF file into the Web page (including, of course, the stream synchronization track), it returns the Fasle value. The true value can only be returned when the load is complete.

Click on the connection shown in Figure 6 to play a flash stream track, which is the tutorial music in Flashsound. Of course we have to modify two places on the above code. First, print the value of tloaded () before embedding the tutorial music, and second, print the value of tloaded () after embedding the tutorial music. At this point, you can see from the results that the value of tloaded () is false before embedding the tutorial music, and this value is true after the embedded tutorial music is complete.

(Figure 6)

The code that is specifically modified is as follows:

<HTML>

<HEAD>

<script src= "Flashsound.js" ></SCRIPT>

<SCRIPT>

var mysoundobj = new Flashsound ();

</SCRIPT>

</HEAD>

<BODY>

<p><a href= "javascript://"

> Play Tutorials Music </A>

<a href= "javascript://"

> Pause Playback </A>

<a href= "javascript://"

> Continue playing </A>

<a href= "javascript://"

> whether to play </A></P>

<SCRIPT>

Alert ("Before embedding, tloaded () returns" +

Mysoundobj.tloaded ());

Mysoundobj.autostart = false;

mysoundobj.embedswf ("earsonly.swf");

Alert ("After embedding, tloaded () returns" +

Mysoundobj.tloaded ());

</SCRIPT>

</BODY>

</HTML>

Check the player version number with the rapid development of the Flash Player, you may be wondering what your Flash Player version number is. Thankfully, the Flashsound JavaScript API supports checking the player version number. This is an attribute of the Flashsound object. To get this value, you need to write the following code statement:

  Flashsound.playerversion

This property should be set to read-only. Although you can specify its numeric value, specifying a number for the player version number will result in an error. To get the version number of the player, we don't have to do anything but include flashsound JavaScript code, or Flashsound.js. Move the mouse to the connection shown in Figure 7 to get the player version number.

(Figure 7)

The following are the specific code:

<HTML>

<HEAD>

<script src= "Flashsound.js" ></SCRIPT>

</HEAD>

<BODY>

<p><a href= "javascript://"

> Player version number </A></P>

</BODY>

</HTML>

Sometimes, you may want to limit your manuscript program to determine the version number of the Flash player. You can use the Flashsound object's Setminplayer () method to implement it. The Flashsound JavaScript API provides you with a number of powerful features. You can specify a piece of code to perform the process when the version number of the existing player is lower than the minimum version number of the player.

Let's verify how the Ifnotminplayer () method works. Because the highest player version number is 5, we set the minimum player version number to 6来 to test this method. This method Ifnotminplayer () should be used after the Setminplayer () method. Click on the connection shown in Figure 8 to see a demo of this new method:

(Figure 8)

To set the minimum player version number 6 We can use the statement: Setminplayer (6) and call Ifnotminplayer () and a function downloadrecentplayer () with one argument. This downloadrecentplayer () function prompts you to download the newer version of the player.

Here is the code for the implementation:

<HTML>

<HEAD>

<script src= "Flashsound.js" ></SCRIPT>

</HEAD>

<BODY>

<script language= "JavaScript" >

function Downloadrecentplayer () {

Alert ("You need to download a newer version of the Flash Player");

}

Flashsound.setminplayer (6);

Flashsound.ifnotminplayer (' Downloadrecentplayer () ');

</SCRIPT>

</BODY>

</HTML>

Set the minimum player version number sometimes it takes a lot of time to write a stand-alone version of the manuscript program. Therefore, you may choose a version that is higher than the minimum version number. Typically, you may choose the latest player version. So, there is the question: Why do we have to deal with the old version of the player? You can use the Setminplayer () method to set the minimum version number. Its only one parameter is the version number.

Now let's verify how the following Setminplayer () works. Because the best version number is 5, when we set the minimum version number to 6, the player will not make a sound.

The three-line connection shown in Figure 9 will show us all of this. First line The first connection shows the smallest version number 5, and the second sets the player's minimum version number to 6, which makes the player not sound. You can give it a try right away.

(Figure 9)

Here is the specific code:

<HTML>

<HEAD>

<script src= "Flashsound.js" ></SCRIPT>

<SCRIPT>

var mySoundObj1 = new Flashsound ();

var mySoundObj2 = new Flashsound ();

</SCRIPT>

</HEAD>

<BODY>

<p><a href= "javascript://"

>

Set the player minimum version number to 5</a>

<a href= "javascript://"

>

Set the player minimum version number to 6</a></p>

<a href= "javascript://"

> Play Tutorials Music </A>

<a href= "javascript://"

> Pause Playback </A>

<a href= "javascript://"

> Continue playing </A>

<a href= "javascript://"

> whether to play </A></P>

<a href= "javascript://"

> Play scale Music </A></P>

<SCRIPT>

Mysoundobj1.autostart = false;

mysoundobj1.embedswf ("earsonly.swf");

mysoundobj2.embedswf ("scale.swf");

</SCRIPT>

</BODY>

</HTML>

Clearing error messages clearing error messages is a topic worth discussing in all programming languages. Usually it's a headache for programmers. For a program you may have the feeling that when you make a program you find a mistake, you will be excited, or you can check the program or find the wrong place, it will also annoy you. Because this is a very rigorous topic, so let yourself decide. There is no doubt that error messages are an important part of a novice programmer, because you need to debug your new manuscript program based on this error message.

Using the Flashsound JavaScript API you can choose whether to clear the error message, using the Muteerrormsg attribute of the Flashsound object. To keep the error message, you need to set this property to False. If you want to set it to true during the debugging phase. In fact, the default value is True, once set to true. The error message is cleared.

The following JavaScript code contains an error because there is a variable that is not defined:

<script language= "JavaScript" >

Flashsound.muteerrormsg = A;

</SCRIPT>

We can choose to reserve or clear this error message for this JavaScript error. The following manuscript program is to clear the error message:

<script language= "JavaScript" >

Flashsound.muteerrormsg = true;

Flashsound.muteerrormsg = A;

</SCRIPT>

If you want to keep the error message, the manuscript program is as follows: <script language= "JavaScript" >

Flashsound.muteerrormsg = false;

Flashsound.muteerrormsg = A;

</SCRIPT>

You can see the demo of these two files by clicking on the two connections shown in Figure 10:

(Figure 10)

The code that implements the error message is as follows:

<HTML>

<HEAD>

<script src= "Flashsound.js" ></SCRIPT>

</HEAD>

<BODY>

<script language= "JavaScript" >

Flashsound.muteerrormsg = false;

Flashsound.muteerrormsg = A;

</SCRIPT>

</BODY>

</HTML>

The code to implement the purge error message is as follows:

<HTML>

<HEAD>

<script src= "Flashsound.js" ></SCRIPT>

</HEAD>

<BODY>

<script language= "JavaScript" >

Flashsound.muteerrormsg = true;

Flashsound.muteerrormsg = A;

</SCRIPT>

</BODY>

</HTML>



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.