ReadAlong
HTML5 audio player and text highlighter for immersive audio accompaniment
This object is an adaptation of the work of Weston Ruter https://github.com/westonruter/html5-audio-read-along
My purpose was to abstract the functionality into a flexible, lightwight object to allow plugging functionality into modular framework-based applications.
Some changes include:
- Improved speed of getCurrentWord and class highlighting
- Simplified timers to use just one, improving reliability at higher speeds
- Added a bunch of consumer events (on_start, on_complete, on_pause, on_resume, on_newline)
- Made tags and classes somewhat configurable, with terse deaults
- Removed the tab index stuff (I probably shouldn't have)
- Changed seconds to ms
- Changed data-attributes to use a single 'data-map' attribute like data-map="7464,844"
- Wrapped code in instantiatable object with configuration in constructor
- If no audio src, src is extracted from block's data-audiosrc
- Added top-level play controls such as playBlock, pause, resume, playRange, playWord
- Audio element is created automatically and need not be provided in HTML
Install
npm install readalong --save
Use
// Assuming your HTML is set up to as blocks with data-audiosrc and words with data-map attributes like so:<p id='a365' data-audiosrc="gospel-wealth-single.mp3"> <w data-map="0,1315">The </w><w data-map="1315,1925">inevitable </w></p> // Initialize the audio playerlet ra = // start playing audio using block idra // just for fun, tweak the speed every 5 seconds
Test
This is a UI object, so the tests were just used for development.
Configuration Options
// Configuration options. These are the defaultslet args = playbackRate: 1 // speed, between .05 and 2 forceLineScroll: false // automatically scroll between lines keep_highlight_on_pause: false // show current word when pausing highlight_trail: false // highlights two words at a time instead of just one -- less jumpy auto_continue: false // tries to continue on to the next playable block click_listener: false // plays from clicked word spacebar_toggle: false // spacebar toggles play// Optional events you can hook intolet events = on_pause: onAudioPause // provides word, position, speed on_resume: onAudioResume on_move: onAudioMove // provides old position, new positions, speed on_start: onAudioStart on_complete: onAudioComplete // provides id on_newline: onAudioNewline let ra = args events ra
Notes about word-wrapping
The original ReadAlong implementation used a very verbose and DOM-based approach. Each word was wrapped in a span with data attributes specifying the start and length of that word.
I'm trying to make this as terse as possible since the my target is ebooks on mobile. So I'm wrapping each word in a custom "w" tag during initialization and keeping timing information in an indexed array keyed by block id. The "w" tag is not standard HTML which means it will not get in the way of any tags you already use. But you can change this in the config object if you choose.
Also, I've switched the default storage to a single data-map attribute formatted as "begin,dur" and with integer ms instead of floating seconds. More natural to programming, I feel.
<!-- #1 Original Readalong html format, (does not include audio src): --> In those days a decree went out from Caesar <!-- #2 My slightly more terse format with block, uses integer ms instead of seconds --> In those days a decree went out from Caesar