Assets (Multimedia)

Bonsai currently supports five different asset types:

Note: All Asset classes will resolve the asset path using the assetBaseUrl that you can define when loading a movie (more info on loading movies). If it’s not defined then it’ll fallback on the baseUrl, and if that’s not defined then it’ll resolve the asset path against the page where the top-level movie is embedded.


Loading and playing an audio track:

var audio = new bonsai.Audio([
  {src: 'path/to/audio.m4a'},
  {src: 'path/to/audio.ogg'}

audio.on('load', function(){;


Note: On iOS devices, Audio can only be played in reaction to a user event. To make this work with bonsai’s inherently asynchronous architecture you’ll need to call audio.prepareUserEvent(). And then you can freely bind to user-events and play the audio in reaction, like so:

audio.prepareUserEvent(); // Needed for iOS devices
someButton.on('click', function() {;


Loading and displaying a Bitmap:

new Bitmap('path/to/image.png').on('load', function() {


To embed a sub-movie from within your current movie you would do:

// It is best to wait for an asset to
// load before adding it to the stage

new Movie('path/to/sub-movie.js').on('load', function() {
  this.addTo(stage); // Add the loaded sub-movie to the stage


Loading and displaying a video:

var video = new bonsai.Video([
  {src: 'assets/sample_iPod.m4v', type:'video/mp4'},
  {src: 'assets/sample.ogv', type:'video/ogg'}
  y: 150,
  x: 150,



See the Custom Fonts Overview