Gapless.js: JavaScript Plugin for Seamless Audio Playback on the Web
By
switz
Crisp on the outside, thoughtful on the inside. A keeper.
Summary
Gapless.js is a JavaScript plugin for seamless audio playback on the web that uses HTML5 audio and Web Audio API to enable gapless transitions between tracks. Built for Relisten.net to handle live music playback, it features a simple API, minimal dependencies (only xstate for state management), and is designed for easy implementation with clear documentation and a live demo available.
Key quotes
· 5 pulledGapless audio player for the web. Takes an array of audio tracks and uses HTML5 audio with the Web Audio API to enable seamless, gapless transitions between tracks.
Though the earnest goal is not bundle-size driven, it has only one production dependency (xstate) so it operates in a rigid manner according to a well-designed state machine.
It has a dead simple API and is easy to get up and running.
Built for Relisten.net, where playing back gapless live tracks is paramount.
const player = new Queue({ tracks: [] })
You might also wanna read
WebSparks: An AI-Powered Tool for Building Web Applications Without Extensive Coding
WebSparks is an AI-powered software engineer that transforms ideas into fully functional web applications without requiring extensive coding
innovirtuoso.com·1d ago
Joost de Valk publishes open Website Specification: 128 rules for modern, future-proof websites
Joost de Valk, creator of Yoast SEO, published the Website Specification (specification.website) — an open, platform-agnostic reference docu
ppc.land·1d ago
ZX Spectrum BASIC interpreter rebuilt from scratch to run natively in web browsers
A developer has rebuilt the ZX Spectrum's BASIC interpreter from scratch to run in a web browser, without emulating the original Z80 hardwar
boingboing.net·1d ago
Building mobile-safe layouts with CSS safe-area-inset properties
This article explains how to use CSS safe-area-inset properties to build mobile-friendly layouts that account for non-rectangular screen fea
polypane.app·1d ago
How to Set Up an Apache Reverse Proxy for an Ecommerce Website
This article provides a comprehensive, start-to-finish guide on setting up an Apache reverse proxy specifically for ecommerce websites. It c
blog.radwebhosting.com·2d ago
Implementing live text search in React with Firestore Enterprise's built-in search pipeline
Firebase's Firestore Enterprise edition now includes built-in text search support. This article demonstrates how to implement live text sear
firebase.blog·2d ago