PSA Test Page

Each player plays a short beep once per second, so speed changes are audible (pitch stays the same). Use Load PSA or your installed bookmarklet. After editing src/, run npm run build first.

1. Episode with a heading

A plain audio element under its heading.

2. One heading, two labelled players

The heading is shared, so each player should take the label beside it.

Part 1 — Opening

Part 2 — Interview

0 seconds of 1 minute, 0 seconds

Part 3 — Screen-reader text is ignored

3. Video with a title attribute

4. Stubborn player

Sets playbackRate back to 1 every second and whenever it changes.

5. Late player

Inserted two seconds after the page loads.

6. Shadow DOM player

7. Same-origin iframe

Its body is 0px tall with overflow-y: scroll, like YouTube's; the heading inside must still count as visible.

8. Off-page audio

Plays a new Audio() that is never added to the page, and publishes its title via Media Session.

9. Playlist that reloads its source

Calls load() with a new six-second track whenever one ends.

10. Fullscreen container

The panel should stay visible when this box is fullscreen.

11. Live stream

A MediaStream never ends, like live radio. It should stay at 1× and show “Live · normal speed”.

12. Growing live stream (simulated)

Like RTHK live radio: the duration is a number that keeps growing instead of being Infinity. Here it grows 0.4 s every 0.4 s, steps too small to notice one at a time. It should drop back to 1×.

13. Video in a modal dialog

While the dialog is open, the panel should stay on top of it and clickable.

A second dialog, opened on top of the first one.

14. Popover over the whole page

The panel should stay on top of a popover the page opens after it.

This popover covers the page.

15. Long episode

Four minutes long, so PSA remembers where it was left and offers to resume there.