Tài liệu PHP and script.aculo.us Web 2.0 Application Interfaces- P4 doc

Chapter Playing sounds with script.aculo.us Hey, what is your best friend's favorite song? Wouldn't it be great if you could surprise him/her by playing his/her favorite song from the browser (copyright issues notwithstanding)? Let's see how script.aculo.us provides us with the sounds.js file through which we can play any song with just one line of code It is dead simple to play a song from the browser using JavaScript Types of sounds Not to mention, most of us are bitten by music bugs—especially if you like to work late nights with your favorite music playing Here is a simple tutorial section to quickly create your own playlist and share it with others too Using this module, we can play music through the browser Let's see it in action [ 79 ] This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009 Please purchase PDF Split-Merge hildawww.verypdf.com to remove this watermark 2205 on ave., , missoula, , 59801 Adding Effects and Multimedia to User Interface Design MP3 sounds MP3s are supported only in the sounds.js file from script.aculo.us 1.8 onwards This feature is not available in version 1.6 Here are some of the methods we can use while trying to play sounds with script.aculo.us • play: When this method is invoked, the MP3 file starts playing • disable: We can disable the MP3 playback using this option • enable: The MP3 playback can be enabled using this option You might want to use this feature for critical events when something goes wrong (maybe introduce a beep) Alternatively, a more positive sound could be played that lets the user know something successful has happened Code usage The syntax for using this feature is pretty simple But before we get started, let's get all of the necessary files included in a single file and save it as song.html OK, so now quickly add this piece of JavaScript code into the page: play sound (parallel) A hands-on example A simple example is demonstrated here To play a song we need to create a link that, on clicking, should play the song Play Song The song path can be on our server side Alternatively, we can even pass the complete and correct URL of the location of the song We can have the MP3 song residing on our own server space, or we can specify a path for the song But generally it would require much more engineering work to make the application work fast in a multiuser environment [ 80 ] This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009 Please purchase PDF Split-Merge hildawww.verypdf.com to remove this watermark 2205 on ave., , missoula, , 59801 Chapter To disable the sound being played, we define the following code: Mute Again, to enable the sound we use: Enable Simple? OK Now that we have our basics ready, let's see the action Let The Music PLay, baby!!! toolbar { background:#FFFFCC; } Let The Music Play, baby!!! Play Song   Change The Next Song   Mute   Enable sounds   [ 81 ] This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009 Please purchase PDF Split-Merge hildawww.verypdf.com to remove this watermark 2205 on ave., , missoula, , 59801 Adding Effects and Multimedia to User Interface Design When you run the script, you should be able to see the following screenshot and hear the song when you click on the Play Song link: Summary So far, we have covered various multimedia effects using script.aculo.us In this chapter we learned: • To use different types of effects such as morph, highlight, fade, blinddown,� and many more • About the options available with effects • How to use sounds, and play songs using script.aculo.us from any browser • To have fun while working with the hands-on examples In the next chapter, we shall have loads of fun learning to implement the drag and drop functionality using script.aculo.us Play on! [ 82 ] This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009 Please purchase PDF Split-Merge hildawww.verypdf.com to remove this watermark 2205 on ave., , missoula, , 59801 AJAX Drag and Drop Feature using script.aculo.us In Chapter we saw the various effects provided by the script.aculo.us visual library At the end of Chapter 4, I also gave you a hands-on task How did you it? The solution to the task that combines all the effects in one go,is as follows: Fade   SlideUp   SlideDown   Puff   DropOut   Shake   Pulsate   Squish   This material is copyright and is licensed for the sole use by Richard Ostheimer on 18th June 2009 Please purchase PDF Split-Merge hildawww.verypdf.com to remove this watermark 2205 on ave., , missoula, , 59801 AJAX Drag and Drop Feature using script.aculo.us Shrink   RESET   BlindUp   SwitchOff   Fold   Grow   Multiple   Opacity   Morph