Releases: asciinema/asciinema-player
3.14.0
This is a significant release, with major refactoring to the terminal renderer.
Notable changes:
- Faster, better terminal renderer (see below)
- New
boldIsBrightoption (see below) - Better CSS isolation from the host page, preventing style collisions/interference (#302)
- Major improvements to the test suite (better coverage, more stable runs)
New terminal renderer
The terminal renderer is now 2x faster, resulting in reduced (typically zero) frame skips, and lower CPU and memory usage. In practice, the playback is smoother (up to 60 FPS, since there's no fixed frame rate) even for the most demanding animations.
There are 4 changes in this new implementation that contribute to better performance:
- background and block symbol (standard ASCII blocks, sextant glyphs, block mosaics) rendering has been moved from DOM text nodes to
<canvas>, - serialization/deserialization overhead for Rust-to-JS data transfer has been minimized by using direct WASM memory access (via DataView and typed arrays),
- the algorithm for grouping text spans based on their attributes (color, italic, bold, etc) has been improved, largely enabled by moving background rendering from the DOM text layer,
- text nodes in DOM are now updated via direct DOM manipulation, while previously it went through Solid.js machinery.
Other than improving performance, moving block symbol rendering to a crisp, pixelated canvas resulted in perfect alignment of block chars with the background. No more visual glitches for ANSI art!
Last but not least, 4 Powerline symbols (2 arrows, 2 triangles) and the smooth mosaic character set are now rendered as SVG instead of relying on fonts, giving them better alignment and making those glyphs look consistent across browsers/platforms.
Check out these cool demos to see the new renderer in action:
https://asciinema.org/a/648882 - Amiga themed Terminal Multiplexer
https://asciinema.org/a/370006 - Impossible Flappy
https://asciinema.org/a/150828 - term81 - voxel
https://asciinema.org/a/150843 - term81 - tunnel
https://asciinema.org/a/141032 - cbeams
https://asciinema.org/a/423181 - Tetris
https://asciinema.org/a/335029 - Gorched
New boldIsBright option
Since the early days, the player assumed the classic (legacy) logic of "when text has the bold attribute it should be rendered in high-intensity/bright variant of its color", e.g., bold + color 2 was rendered as bold + color 10. This logic was often used by terminal emulators in the past, and many of them provided a setting for enabling/disabling this behavior.
With this version, the "bold makes it bright" is disabled by default (boldIsBright: false), but it can be enabled by setting boldIsBright: true when initializing the player. Whether you should use it or not depends on your terminal and its corresponding setting. Many modern terminal emulators don't enable this behavior by default, so when in doubt, just leave it off.
3.13.5
3.13.4
3.13.3
3.13.2
Notable changes:
- Modernized default terminal font family
- Improved support for Nerd Fonts
- Improved alignment of special symbols (box drawing, NF symbols, etc)
- Moved background rendering to a separate layer to prevent unwanted icon/symbol cutoffs
Nerd Font symbols (Powerline, Devicons, Font Awesome, Octicons, Pomicons, Codicons, ...) (https://github.com/ryanoasis/nerd-fonts/wiki/Glyph-Sets-and-Code-Points) are now properly rendered as long as the Symbols Nerd Font is loaded on the web page.
You can add Symbols Nerd Font by downloading NerdFontsSymbolsOnly.zip from Nerd Font releases page, then adding this @font-face declaration to your CSS:
@font-face {
font-family: "Symbols Nerd Font";
src: local(SymbolsNerdFont-Regular), url("/fonts/SymbolsNerdFont-Regular.woff2") format("woff2");
}3.12.1
This version includes additional fix for seeking past the end of recording and restarting the playback.
3.12.0
Notable changes:
- Live audio stream support for WebSocket sources (see below)
- Improved adaptive buffer algorithm for WebSocket sources (see below)
- Fixed keyboard shortcuts issue (stopped working) caused by the new mute/unmute icon
- Fixed seeking after playback ended (#282)
Live audio playback
The audioUrl option, introduced in v3.11, can now also be used with live (WebSocket) sources:
AsciinemaPlayer.create("ws://example.com/ws/stream", document.getElementById("demo"), {
audioUrl: "http://example.com/icecast/stream.ogg"
});The URL should be a live audio source - either a direct HTTP audio stream (.mp3, .aac, .ogg, etc) such as Icecast/Shoutcast endpoint, or HLS playlist (.m3u8).
Note that it's not recommended to use autoplay: true option together with audioUrl - browsers often require explicit user activity (click, tap) to enable sound, which in the player's case would be starting the playback by clicking on the play button. Without user click the autoplay will start the playback but the sound likely won't be there.
Also, for the audio playback to work a server that handles the audio URL (e.g. Icecast) must be configured to allow CORS requests from the page (URL) that hosts the player.
New adaptive buffering
The WebSocket driver uses adaptive buffer (expressed in time) to ensure smooth, stutter free playback of live sessions with minimal latency.
The previous algorithm used a moving average over a sliding window of N recent latencies. It did ok-ish job, but given the sparse nature of the event stream (no constant rate) it turned out to be not ideal. Here's how it performed. Red dots are measured latencies, green line is effective buffer time:
The new algorithm uses time based EMA (exponential moving average), which is much more relevant for sparse events, resulting in more stable and overall lower buffer size when applied to a wide spectrum of terminal activities (here applied to the same input latencies as the one above):
3.11.1
This release brings additional fixes for audio loading in Safari.
3.11.0
Notable changes:
- Synced audio playback (see below)
- JS bundle size reduced by 43 KB (202 KB -> 159 KB) - it's now 78% of the previous release (v3.10) size
- WebSocket driver now uses jitter for exponential backoff calculation when reconnecting
- WebSocket driver can play live sessions encoded in asciicast v3 compatible format
- When loading of a recording takes 3s a loading animation is now shown - this may typically occur during initial buffering of the audio
- Fixed time position update when stepping through a recording with
,and.keys
The main new thing in this version is the synced audio playback.
When audioUrl is passed as an option when mounting the player on the page, the player automatically creates hidden audio element, ensures the audio file is ready for playback, and syncs audio playback position with the terminal recording playback (pause, resume, seek just work).
AsciinemaPlayer.create("/demo.cast", document.getElementById("demo"), {
audioUrl: "https://example.com/voiceover.mp3"
});There's also a new button (icon) and keyboard shortcut (m key) for muting/unmuting.
Note that for the audio playback to work:
- a server that handles the audio URL must be configured to allow CORS requests from the page (URL) that hosts the player
- that server must support HTTP range requests
- you must not use
autoplay: trueoption - browsers often require explicit user activity (click, tap) to enable sound
Check out this demo:
3.10.0
Notable changes:
- vastly improved wide character (CJK/emoji) support (this solves long standing set of issues: #270, #266, #199, #185)
- added preliminary support for the new asciicast v3 recording format
- added gruvbox-dark theme (thanks @hupfdule)
- increased cursor blink interval from 500ms to 600ms
- improved screen reader support (thanks @DataTriny)
- fixed terminal resizing during seek and step actions (thanks @gustavosbarreto)
- fixed crash when starting the playback while the player is still initializing
- fixed live stream handling when producer reconnects to the server
- various UI tweaks
