audioとvideoの再生状態にマッチするCSS疑似クラスです。:has()と組み合わせると、再生中かどうかをJavaScriptでクラスに写さなくてもプレイヤーUI全体を状態に追従させられます。
再生中だけバーのアニメーションが動き、マッチしている疑似クラスのチップが点灯します。ネイティブのコントロールとplay()呼び出しのどちらで操作しても同じように追従します。
バーのアニメーションはanimation-play-stateを.player:has(audio:playing)で切り替えているだけです。ネイティブのコントロールから操作しても、ボタンからplay()を呼んでも、CSSは同じように追従します。
muted属性の有無と:mutedのマッチを並べています。コントロールやプロパティでミュートを切り替えると:mutedだけが変わり、属性を付け外ししても音の状態は変わりません。
muted属性は要素が作られたときの初期値を決めるだけで、あとから付け外ししても音は変わりません。コントロールのミュートボタンやmutedプロパティで変えた今の状態を表すのは:mutedだけです。