Create a new Player instance
Element to mount the rendering canvas to
Canvas width (pixels)
Canvas height (pixels)
The ratio between width and height should be 3:4 for best results
Fired when the Flipnote has loaded enough to begin animation play
Fired when the Flipnote has loaded enough to play successfully
Fired when the animation duration has changed
Fired when the media has become empty; implementation of the HTMLMediaElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event event.
Fired when the Flipnote data has been loaded; implementation of the HTMLMediaElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event event.
Fired when the Flipnote metadata has been loaded; implementation of the HTMLMediaElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event event.
Fired when the player audio volume or muted state has changed
Fired when firstFrame has been called
Fired when lastFrame has been called
Fired when nextFrame has been called
Fired when prevFrame has been called
Fired when the current frame index has changed
Fired after the Flipnote has been closed with close
Fired just before the player has been destroyed, after calling destroy
Fired after a loading, parsing or playback error occurs
Fired when a Flipnote has finished loading
Fired when a Flipnote has begun loading
Fired when a Flipnote is ready for playback
Fired when playback has ended
Fired when playback has looped after reaching the end
Fired when animation playback is paused
Fired when animation playback begins or is resumed
Fired when playback progress has changed
Fired when a seek operation completes
Fired when a seek operation begins
Fired when the playback time has changed
Audio player
Automatically begin playback after a Flipnote is loaded
Canvas HTML element
Animation duration, in seconds
Root element
Animation layer visibility
Metadata for the currently loaded Flipnote
Currently loaded Flipnote
Format of the currently loaded Flipnote
Flipnote parser settings
Frame renderer
Array of events supported by this player
Implementation of the HTMLMediaElement buffered property
Implementation of the HTMLMediaElement currentSrc property
Implementation of the HTMLMediaElement seekable property
Implementation of the HTMLVideoElement videoHeight property
Implementation of the HTMLVideoElement videoWidth property
Current animation frame index
Current animation frame index
Current animation playback position, in seconds
Current animation playback position, in seconds
Animation frame count
Animation frame speed
Animation frame rate, measured in frames per second
Indicates whether playback should loop once the end is reached
Indicates whether playback should loop once the end is reached
Audio mute state
Audio mute state
Indicates whether playback is currently paused
Indicates whether playback is currently paused
Current animation playback progress, as a percentage out of 100
Current animation playback progress, as a percentage out of 100
The currently loaded Flipnote source, if there is one
The currently loaded Flipnote source, if there is one
Audio volume, range 0 to 1
Audio volume, range 0 to 1
Get the audio mute state
Get the current audio volume
Turn the audio off
Turn audio Sudomemo equalizer filter on or off
Turn the audio on or off
Set the audio volume
Toggle audio Sudomemo equalizer filter
Switch the audio between muted and unmuted
Turn the audio on
Draws the specified animation frame to the canvas. Note that this doesn't update the playback time or anything, it simply decodes a given frame and displays it.
Forces the current animation frame to be redrawn
Returns the visibility state for a given layer
layer index, starting at 1
Resize the playback canvas to a new size
new canvas width (pixels)
new canvas height (pixels)
The ratio between width and height should be 3:4 for best results
Sets whether an animation layer should be visible throughout the entire animation
layer index, starting at 1
true for visible, false for invisible
Toggles whether an animation layer should be visible throughout the entire animation
Remove all registered event callbacks
Emit an event - mostly used internally
Remove an event callback
Add an event callback
Jump to the first animation frame
Jump to the last animation frame
Jump to the next animation frame If the animation loops, and is currently on its last frame, it will wrap to the first frame
Jump to the next animation frame If the animation loops, and is currently on its first frame, it will wrap to the last frame
Jump to a given animation frame
Jump to the thumbnail frame
Implementation of the HTMLVideoElement getVideoPlaybackQuality method
Implementation of the HTMLVideoElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/captureStream method. Not currently working, only a stub.
Implementation of the HTMLMediaElement fastSeek method
Implementation of the HTMLVideoElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/getVideoPlaybackQuality method
Implementation of the HTMLVideoElement https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement/requestPictureInPicture method. Not currently working, only a stub.
Implementation of the HTMLVideoElement seekToNextFrame method
Close the currently loaded Flipnote
Destroy a Player instance
Open a Flipnote from a source
Open a Flipnote into the player
Reload the current Flipnote
Returns true if the player supports a given event or method name
Reload the current Flipnote
Ends a seek operation
Get the current playback time
Get the duration of the Flipnote in seconds
Get the current frame index as a counter string, like "001 / 999"
Determines if playback is looped
Determines if playback is currently paused
Get the current playback progress as a percentage (0 to 100)
Get the current time as a counter string, like "0:00 / 1:00"
Pause animation playback at the current position
Begin animation playback starting at the current position
Seek the playback progress to a different position
animation playback position, range 0 to 1
Set the current playback time
Set the playback loop
Set the current playback progress as a percentage (0 to 100)
Begins a seek operation
Switch the playback loop between on and off
Resumes animation playback if paused, otherwise pauses
Flipnote Player API (exported as
flipnote.Player) - provides a MediaElement-like interface for loading Flipnotes and playing them. This is intended for cases where you want to implement your own player UI, if you just want a pre-built player with some nice UI controls, check out the Web Components page instead!Create a new player
You'll need an element in your page's HTML to act as a wrapper for the player:
<div id="player-wrapper"></div>Then you can create a new
Playerinstance by passing a CSS selector that matches the wrapper element, plus the desired width and height.const player = new flipnote.Player('#player-wrapper', 320, 240);Load a Flipnote
Load a Flipnote from a valid FlipnoteSource:
player.load('./path/to/flipnote.ppm');Listen to events
Use the on method to register event listeners:
player.on('play', function() { // do something when the Flipnote starts playing... });