Convert Figma logo to code with AI

scottschiller logoSoundManager2

A JavaScript Sound API supporting MP3, MPEG4 and HTML5 audio + RTMP, providing reliable cross-browser/platform audio control in as little as 12 KB. BSD licensed.

4,975
769
4,975
100
View on GitHubView on NPM

Top Related Projects

goldfire's avatar

howler.js

23,743

Javascript audio library for the modern web.

CreateJS's avatar

SoundJS

4,430

A Javascript library for working with Audio. It provides a consistent API for loading and playing audio on different browsers and devices. Currently supports WebAudio, HTML5 Audio, Cordova / PhoneGap, and a Flash fallback.

Tonejs's avatar

Tone.js

13,373

A Web Audio framework for making interactive music in the browser.

katspaugh's avatar

wavesurfer.js

8,610

Audio waveform player

Quick Overview

SoundManager2 is a JavaScript library that provides a consistent and reliable way to play audio content on the web. It offers a simple API for playing, pausing, and controlling audio playback, and supports a wide range of audio formats, including MP3, WAV, and OGG.

Pros

  • Cross-browser Compatibility: SoundManager2 is designed to work across a wide range of web browsers, including older versions of Internet Explorer, Firefox, and Chrome.
  • Flexible API: The library provides a flexible API that allows developers to easily integrate audio playback into their web applications.
  • Fallback Functionality: SoundManager2 includes fallback functionality that allows it to gracefully degrade in older browsers that don't support the latest HTML5 audio features.
  • Active Development: The project is actively maintained, with regular updates and bug fixes.

Cons

  • Dependency on Flash: While SoundManager2 can use HTML5 audio when available, it still relies on the Flash plugin for audio playback in older browsers, which can be a limitation for some users.
  • Complexity: The library can be complex to set up and configure, especially for developers who are new to audio programming on the web.
  • Performance Concerns: Depending on the complexity of the audio content and the number of concurrent playback instances, SoundManager2 may have performance implications on some devices.
  • Limited Mobile Support: The library's support for mobile devices is not as comprehensive as its desktop browser support.

Code Examples

Here are a few examples of how to use SoundManager2 in your web application:

  1. Playing a Sound:
var mySound = soundManager.createSound({
  id: 'mySound',
  url: 'path/to/sound.mp3'
});

mySound.play();
  1. Pausing and Resuming a Sound:
mySound.pause();
mySound.resume();
  1. Adjusting Volume:
mySound.setVolume(50);
  1. Handling Playback Events:
mySound.onfinish = function() {
  console.log('Sound finished playing!');
};

Getting Started

To get started with SoundManager2, follow these steps:

  1. Download the latest version of the library from the GitHub repository.
  2. Include the SoundManager2 script in your HTML file:
<script src="path/to/soundmanager2.js"></script>
  1. Initialize SoundManager2 and configure it to your needs:
soundManager.setup({
  url: 'path/to/swf-files/',
  onready: function() {
    // SoundManager2 is ready to use
  },
  ontimeout: function() {
    // SoundManager2 failed to initialize
  }
});
  1. Start creating and playing sounds using the SoundManager2 API:
var mySound = soundManager.createSound({
  id: 'mySound',
  url: 'path/to/sound.mp3'
});

mySound.play();

For more detailed information and documentation, please refer to the SoundManager2 GitHub repository.

Competitor Comparisons

goldfire logo

howler.js

23,743

Javascript audio library for the modern web.

Pros of howler.js

  • Lightweight and more modern codebase
  • Better support for mobile devices and newer web audio technologies
  • Simpler API and easier to use for beginners

Cons of howler.js

  • Less extensive documentation compared to SoundManager2
  • Fewer legacy browser support options
  • Some advanced features may require additional configuration

Code Comparison

SoundManager2:

soundManager.setup({
  url: '/path/to/swf-files/',
  onready: function() {
    var mySound = soundManager.createSound({
      id: 'aSound',
      url: '/path/to/an.mp3'
    });
    mySound.play();
  }
});

howler.js:

var sound = new Howl({
  src: ['/path/to/sound.webm', '/path/to/sound.mp3'],
  autoplay: true,
  loop: true,
  volume: 0.5
});

Summary

Both SoundManager2 and howler.js are popular audio libraries for web development. howler.js offers a more modern approach with better mobile support and a simpler API, making it easier for beginners to use. However, SoundManager2 provides more extensive documentation and legacy browser support. The choice between the two depends on project requirements, target audience, and developer preferences.

CreateJS logo

SoundJS

4,430

A Javascript library for working with Audio. It provides a consistent API for loading and playing audio on different browsers and devices. Currently supports WebAudio, HTML5 Audio, Cordova / PhoneGap, and a Flash fallback.

Pros of SoundJS

  • Part of the larger CreateJS suite, offering integration with other libraries for a comprehensive HTML5 development toolkit
  • Provides a consistent API across different browsers and devices, simplifying cross-platform audio development
  • Supports Web Audio API for advanced audio manipulation and effects

Cons of SoundJS

  • Less mature and potentially less stable compared to SoundManager2's long development history
  • May have a steeper learning curve, especially if not familiar with the CreateJS ecosystem

Code Comparison

SoundJS:

createjs.Sound.registerSound("path/to/sound.mp3", "soundID");
createjs.Sound.play("soundID");

SoundManager2:

soundManager.setup({
  url: 'path/to/swf-files/',
  onready: function() {
    soundManager.createSound({id: 'mySound', url: 'path/to/sound.mp3'});
    soundManager.play('mySound');
  }
});

SoundJS offers a more straightforward API for registering and playing sounds, while SoundManager2 requires a setup process and callback function. SoundJS's approach may be more intuitive for developers new to audio libraries, but SoundManager2's setup provides more control over the initialization process.

Tonejs logo

Tone.js

13,373

A Web Audio framework for making interactive music in the browser.

Pros of Tone.js

  • More modern and actively maintained
  • Offers advanced audio synthesis and processing capabilities
  • Better suited for complex musical applications and interactive audio

Cons of Tone.js

  • Steeper learning curve for beginners
  • Larger file size and potentially higher resource usage
  • May be overkill for simple audio playback needs

Code Comparison

SoundManager2:

soundManager.setup({
  url: '/path/to/swf-files/',
  onready: function() {
    var mySound = soundManager.createSound({
      id: 'aSound',
      url: '/path/to/an.mp3'
    });
    mySound.play();
  }
});

Tone.js:

const player = new Tone.Player("https://tonejs.github.io/audio/berklee/gong_1.mp3").toDestination();
Tone.loaded().then(() => {
  player.start();
});

Summary

SoundManager2 is an older library focused on cross-browser audio playback, while Tone.js is a more modern and comprehensive audio framework. Tone.js offers advanced features for music creation and audio manipulation, making it ideal for complex audio applications. However, it may be more challenging for beginners and could be excessive for simple audio playback needs. SoundManager2 is simpler to use but lacks the advanced capabilities of Tone.js. The choice between the two depends on the specific requirements of your project and your level of audio programming expertise.

katspaugh logo

wavesurfer.js

8,610

Audio waveform player

Pros of wavesurfer.js

  • More modern and actively maintained, with regular updates and bug fixes
  • Offers advanced audio visualization features, including waveform display
  • Supports a wider range of audio formats and streaming options

Cons of wavesurfer.js

  • Larger file size and potentially higher resource usage
  • Steeper learning curve for basic audio playback functionality
  • May require additional setup for cross-browser compatibility

Code Comparison

SoundManager2:

soundManager.setup({
  url: '/path/to/swf-files/',
  onready: function() {
    var mySound = soundManager.createSound({
      id: 'aSound',
      url: '/path/to/an.mp3'
    });
    mySound.play();
  }
});

wavesurfer.js:

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: 'purple'
});
wavesurfer.load('audio.mp3');
wavesurfer.on('ready', function() {
  wavesurfer.play();
});

Both libraries provide audio playback functionality, but wavesurfer.js offers more advanced features like waveform visualization out of the box. SoundManager2 has a simpler API for basic audio playback, while wavesurfer.js requires more configuration but provides greater flexibility and visual options.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

SoundManager 2: JavaScript Sound for the Web 🔊

By wrapping and extending HTML5 and Flash Audio APIs, SoundManager 2 brings reliable cross-platform audio to JavaScript.

HTML5 Audio() Support

  • 100% Flash-free MP3 + MP4/AAC (and OGG, FLAC, etc.) where supported
  • Compatible with Apple iPad (iOS 3.2), iPhone/iOS 4 and newer
  • Fallback to Flash for MP3/MP4 support, if needed
  • SM2 API is transparent; HTML5/flash switching handled internally
  • HTML5 API support approximates Flash 8 API features

Basic API Features

  • Load, stop, play, pause, mute, seek, pan (Flash-only) and volume control of sounds from JavaScript
  • Events: onload, whileloading, whileplaying, onfinish and more

Flash-based Features (Legacy Support)

  • (Flash 8+): ID3V1 and ID3V2 tag support for MP3s (title, artist, genre etc.)
  • RTMP / Flash Media Server streaming support
  • MPEG-4 (AAC, HE-AAC, H.264) audio support
  • "MultiShot" play (layered / chorusing effects)
  • Waveform/frequency spectrum data
  • Peak (L/R channel volume) data
  • Audio buffering state / event handling

General Tech Stuff

  • Full API Documentation with examples and notes
  • console.log()-style debug output and troubleshooting tools
  • GitHub Issues for discussion/support

As Heard On The Internets

Some places that do or have used SM2 include SoundCloud, Tidal, Beats, Songza, freesound.org, last.fm, 8tracks, Discogs, and The Hype Machine among others - but most importantly, http://nyan.cat. ;)

Project Home, Documentation, Live Demos etc.

http://www.schillmania.com/projects/soundmanager2/

Compiling JS builds (-nodebug, -jsmin) and Flash components, AS2/AS3 to SWF

(Note: This process is pretty outdated and relies on ancient binaries for the Flash bits. Here be dragons.)

An Ant build file defines the tasks for compiling JS and SWF components, useful if you make changes to the SM2 source and want to recompile. Google's Closure Compiler is used for the JS. AS2 compilation is done by MTASC, and AS3 is handled by Adobe's Open Source Flex SDK (mxmlc) compiler. Refer to build.xml for compiler downloads and path definitions.

Versioning / Development Notes

Releases are versioned by date, e.g., V2.97a.20170601 and are tagged as such. The latest official release is always on trunk/master. Post-release development builds may be available on the appropriate +DEV branch, eg., V2.97a.20170601+DEV

Forks and Pull Requests

Firstly, thank you for wanting to contribute! Bug fixes and tweaks are welcomed, particularly if they follow the general coding style of the project. If making a pull request, use the project's current +DEV development branch as the merge target instead of "master", if possible; please and thank-you.

Random Trivia: SoundManager / SoundManager 2 History

The original "SoundManager" implementation was created in 2001 and used JavaScript and Flash 6 (or thereabouts), and was hacked together to get JS-driven sound on a personal portfolio site. It was later used for the "DHTML Arkanoid" project in 2002.

The original inspiration came from the sonify.org "Flashsound" project; they had tutorials and examples on getting Flash to play sounds when an HTML element was hovered on. This was very up my alley at the time. It all started with a cheezy kung-fu demo.

http://sonify.org/flashsound/kungfu/

Flash's ExternalInterface API was not introduced until Flash 8, but a limited JS <-> Flash API existed via LiveConnect et al which still let the basics work. The original SoundManager used Flash's TCallLabel() methods, exposed to JS, to perform specific actions within "Movie Clips" (essentially, objects).

Movie Clips contained Frames (in the animation sense) which could be given IDs (labels), and could also accept name/value parameters via SetVariable(). Thus, it was possible to create a Movie Clip for each sound, which would have a labeled frame for each sound action desired (stop, seek, pause, volume, and pan), e.g., flashMovie.SetVariable('/MySound:volume, 50);

http://web.archive.org/web/20020404030916/http://sonify.org:80/flashsound/timeline/actionscript.html

When a sound was created, playing it and setting parameters became a matter of having JS tell Flash to go to a specific frame within a Movie Clip to perform the desired "action" e.g., flashMovie.TCallLabel('/soundID', 'play'); and then an additional call to set a variable if needed to apply effects like volume, pan and so on.

Internet Explorer on the Mac did not support the JS/Flash API via LiveConnect etc., but Netscape on MacOS was OK.

The original SoundManager project still lives at http://schillmania.com/projects/soundmanager/ and was deprecated in 2007.

SoundManager 2 became a reality when Flash 8 was released, as it introduced ExternalInterface which was a more complete JS <-> Flash API that allowed Flash methods to be exposed to JS, and could also accept full parameters. ExternalInterface is quite an interesting little hack, as the Flash movie injects some JS into the browser to make it work. Under the hood, it uses XML as a transport layer for calls. (Recall that in the 2000s, XML was hugely popular - the JSON of its day.)

More here on how SM2 / Flash / EI interaction worked.

http://www.schillmania.com/content/entries/2010/how-soundmanager2-works/

SoundManager 2 was released in 2006 and had a much more feature-rich and better-structured API, particularly at the time, thanks to learnings and feedback from the original SoundManager project. SM2 grew to be relatively popular among sites that used sound, whether as effects or a core part of the site experience. (Most sites used either SM2, or the jQuery-library-friendly jPlayer project.)

Why version 2.97?

SoundManager 2 has been at "version" 2.97 for a long time, because 2.97 was arguably the best llama-ass-whipping version of WinAmp. (WinAmp 3 was not as good, and WinAmp 5 was "the best of 2 and 3 combined.") This MP3 player was my favourite Windows app during the 90's, and is missed as there's nothing quite like it on OS X where I spend most of my time these days.

NPM DownloadsLast 30 Days