Recipe 15.6.
Getting the Size of a Sound File
Problem
You want to know the total size of the MP3 audio
file you are loading, as well as the amount that has downloaded so
far (so you can create a visual streaming indicator).
Solution
Access the bytesTotal and bytesLoaded properties of the
Sound object.
Discussion
When streaming an audio file, it's often a good
idea to let the user know how much data has been loaded. The Flash
Player loads the sound as fast as it can, and plays the sound at
its encoded rate. Ideally, the sound data will load faster than the
sound is playing so there won't be a point at which the audio stops
playing to load more data. However, in cases of poor connectivity
or low bandwidth, and when sounds have been encoded with a high
bitrate, the Flash Player may be struggling to keep enough sound
data buffered so the sound doesn't stop.
Therefore, it's a good idea to give the user
some sort of visual representation for the amount of buffered sound
data, alongside the progress of the sound as it plays. You've
probably seen this in many types of streaming media players, such
as Windows Media Player or
QuickTime Player. Usually
there's a progress bar tracking the song as it plays. The
background of the bar might be white. On top of that would be a
growing black bar representing the progress of the song.
Additionally, you might have a gray bar that indicates the buffered
amount. As long as the gray bar (buffer) stays ahead of the black
one (play position), you know you'll have smooth playback. When it
catches up, the media stops playing while the gray bar moves ahead,
buffering more data. When it has enough, the media starts again,
and the black bar starts moving again, and hopefully the gray has
enough of a head start this time.
This recipe covers how to create that gray bar,
using two properties of a Sound object: bytesTotal and
bytesLoaded. (Recipe
15.9 shows how to create the black bar.) These properties are
pretty self-explanatory; bytesTotal contains the total size
of the MP3 file you're streaming, and bytesLoaded contains
how much of it has actually downloaded. If you divide these two
values, you'll have the percentage of the sound that has
loaded.
The following example sets up an enterFrame handler. On each frame
it draws a white rectangle on the stage, and then calculates the
percent of the sound that has loaded. It uses this to draw another
bar (gray, of course) that represents that percent.
package {
import flash.display.Sprite;
import flash.media.Sound;
import flash.net.URLRequest;
import flash.events.Event;
public class ProgressBar extends Sprite {
private var _sound:Sound;
public function ProgressBar( ) {
addEventListener(Event.ENTER_FRAME, onEnterFrame);
_sound = new Sound(new URLRequest("song.mp3"));
_sound.play( );
}
public function onEnterFrame(event:Event):void
{
var barWidth:int = 200;
var barHeight:int = 5;
var loaded:int = _sound.bytesLoaded;
var total:int = _sound.bytesTotal;
if(total > 0) {
// Draw a background bar
graphics.clear( );
graphics.beginFill(0xFFFFFF);
graphics.drawRect(10, 10, barWidth, barHeight);
graphics.endFill( );
// The percent of the sound that has loaded
var percent:Number = loaded / total;
// Draw a bar that represents the percent of
// the sound that has loaded
graphics.beginFill(0xCCCCCC);
graphics.drawRect(10, 10,
barWidth * percent, barHeight);
graphics.endFill( );
}
}
}
}
If you are playing a sound from your hard disk
or local server, you'll barely be able to see the progress bar
move; the sound loads almost instantly and the bar will quickly
jump to 100 percent. If possible, try to put the MP3 file on an
external web server somewhere and access it over the Internet. This
gives you a more accurate view of what your end users will see.
Also, the browser tends to cache the sound file as it plays, so try
clearing your browser's cache before testing this file to give a
more realistic view of the buffering.
See Also
Recipe
15.1 for information on how to load external sound files
andRecipe
15.7.
|