SWFSound is based on SWFObject and allows cross-plattform, cross-browser dynamic sound control from HTML/JavaScript.
The library is released under MIT license and can be freely used for both non-commercal AND commercial projects.
The package consits of a 4kb JavaScript library besides a tiny Flash SWF host (approx 750 Bytes) which allows you to dynamically load, play and control MP3s directly from HTML/JavaScript. - You can control all functions directly from within JavaScript and don't even need to touch the Flash file!
Basic features of SWFSound include:
- Supports dynamically loading MP3 files
- Supports play/stop/pause
- Supports looping
- Supports preloading and MP3 streaming
- Supports MP3 ID3 tag information
- Supports playback of multiple sounds simultaneously
- Supports separate settings of volume and panning per sound
- Supports onLoad and onSoundComplete event handlers
- Obtain current play position and total duration
- Obtain total bytes and loaded bytes of each sound (both during streaming or preload)
Minimum required Flash Player Version: 8.0
---
SWFSound is easy to use! - Have a look at our examples!
---
Successfully tested with these browsers:
WIN - Internet Explorer 5.55 WIN - Internet Explorer 6.0 WIN - Internet Explorer 7.0 WIN - Firefox 3.0.2 WIN - Google Chrome 1.0 WIN - Opera 9.6.3 MAC - Safari 3.2.1 MAC - Safari 2.0.4 MAC - Firefox 3.0.5 MAC - Firefox 2.0.0.20 MAC - Flock 2.0 MAC - Opera 9.6.3 MAC - Camino 1.6.6
---
Event based Code Example:
The following example shows how to embed SWFSound, how to load three different MP3 sounds and how to play and stop them via onMouseOver and onMouseOut JavaScript events.
<html>
<head>
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript" src="swfsound/swfsound.js"></script>
</head>
<body bgcolor="#ffffff">
<script type="text/javascript">
var id_sound1,
id_sound2,
id_sound3;
// Load the SWFSound Flash Engine
swfsound.embedSWF( 'swfsound/swfsound.swf' );
// When the engine is loaded, preload sounds
swfsound.onload = function()
{
// alert("Callback: SWFSound Flash successfully loaded ...");
id_sound1 = swfsound.loadSound( 'mp3/sound1.mp3', streaming = false );
id_sound2 = swfsound.loadSound( 'mp3/sound2.mp3', streaming = false );
id_sound3 = swfsound.loadSound( 'mp3/sound3.mp3', streaming = false );
}
</script>
<br />
<strong>SWFSound Example</strong> (Sounds playing on mouseOver, stopping on mouseOut):<br />
<br />
<a href="#" onMouseOut="return swfsound.stopSound( id_sound1 );" onMouseOver="return swfsound.startSound( id_sound1 );">Test 1: Simple single playback</a><br />
<br />
<a href="#" onMouseOut="return swfsound.stopSound( id_sound2 );" onMouseOver="return swfsound.startSound( id_sound2, 0.0, 2 );">Test 2: Starting from beginning, looping twice</a><br />
<br />
<a href="#" onMouseOut="return swfsound.stopSound( id_sound3 );" onMouseOver="return swfsound.startSound( id_sound3, 10.0, 2 );">Test 3: Starting somewhere in the middle of the sound (10 seconds), then loop twice</a><br />
</body>
</html>---
Streaming based Example Code:
The following example shows how to stream a MP3 on buttonclick and then updating panning position, volume and retrieving the current playback position.
<html>
<head>
<script type="text/javascript" src="swfobject/swfobject.js"></script>
<script type="text/javascript" src="swfsound/swfsound.js"></script>
</head>
<body bgcolor="#ffffff">
<script type="text/javascript">
// Load the SWFSound Flash Engine
swfsound.embedSWF( 'swfsound/swfsound.swf' );
</script>
<br />
<a href="javascript:streamingExample();">Streaming Example (Play on Click!)</A>
·
<a href="javascript:streamingExampleStop();">Stop</a>
·
Play Position: <span id="playpos"></span> ·
Duration: <span id="duration"></span> ·
Panning:
<a href="javascript:streamPan(-100);">left</a>
<a href="javascript:streamPan(0);">center</a>
<a href="javascript:streamPan(100);">right</a>
·
Volume: <a href="javascript:streamVolume(1);">1</a>
<a href="javascript:streamVolume(10);">10</a>
<a href="javascript:streamVolume(30);">30</a>
<a href="javascript:streamVolume(60);">60</a>
<a href="javascript:streamVolume(100);">100</a> </body>
<script type="text/javascript">
var id_sound4;
function updPlayPosition()
{
var obj = document.getElementById('playpos');
obj.innerHTML = swfsound.getPosition( id_sound4 );
var obj = document.getElementById('duration');
obj.innerHTML = swfsound.getDuration( id_sound4 );
}
function streamingExample()
{
id_sound4 = swfsound.loadSound( 'mp3/sound1.mp3', true /* auto-play & stream */ );
swfsound.setPan( id_sound4, 0 /* 0 = center, -100 = left, +100 = right */ );
swfsound.setVolume( id_sound4, 90 /* 0 = silence, 100 = maximum */ );
setInterval( "updPlayPosition()", 10 );
}
function streamVolume( val )
{
swfsound.setVolume( id_sound4, val );
}
function streamPan( val )
{
swfsound.setPan( id_sound4, val );
}
function streamingExampleStop()
{
swfsound.stopSound( id_sound4 );
}
</script>
</body>
</html>
