Chapter 7 · Watch, then practise
Abstractions for Programming
Represent media with reusable objects, events and processing graphs. These web examples illustrate programming abstractions; they are not a claim that the linked course notes teach a particular API.
3 questions · 3 with related videos. Matches are based on playlist titles; broader background matches are labeled.
What to study
- Media objects and state
- Event-driven playback
- Audio processing graphs
Chapter playlists
Choose a playlist
Notes
The Art of Abstraction - Computerphile
Computerphile · 5:22 · Background lecture
Abstraction background from the existing playlist; the HTML video-element example is explained in the answer.
1. A media abstraction
What work does a video element hide from application code?
It exposes playback operations and state while the platform handles tasks such as fetching media, decoding it and presenting frames. Application code can request play or pause and observe state without implementing the codec itself.
Loading playing and recording audio in the Web Audio API
IntelligentSoundEng · 28:45 · Background lecture
Supplementary audio-loading example provides asynchronous-media background; HTML media readiness events are discussed in the answer.
2. Avoid guessing readiness
Why is waiting a fixed two seconds after assigning a media URL an unreliable way to start dependent UI work?
Network speed and decoding time vary. Use the relevant readiness state or event, such as loadedmetadata for dimensions and duration information, and handle errors. The canplay event indicates some playable data; it does not guarantee uninterrupted playback to the end.
Introducing the Web Audio API
IntelligentSoundEng · 20:39
Supplementary Web Audio API introduction for constructing an audio graph.
3. Build a simple graph
Describe an audio graph that plays a source with adjustable volume.
Connect a source node to a gain node, then connect the gain node to the output destination. The source supplies samples, the gain node scales them and the destination renders them. Changing the gain parameter adjusts volume without replacing the source.