<audio>と<video>要素のプロパティにバインドすることで、例えば、AudioPlayer.svelteのようにカスタムプレイヤーUIを簡単に構築できます。

まず、<audio>要素とそのバインディングを追加します（src、duration、pausedには短縮形を使用します）。

<div class="player" class:paused>
	<audio
		{src}
		bind:currentTime={time}
		bind:duration
		bind:paused
	></audio>

	<button
		class="play"
		aria-label={paused ? 'play' : 'pause'}
	></button>

次に、pausedを切り替える<button>にイベントハンドラーを追加します。

<button
	class="play"
	aria-label={paused ? 'play' : 'pause'}
	onclick={() => paused = !paused}
></button>

これで、オーディオプレイヤーは基本的な機能を持つようになりました。スライダーをドラッグしてトラックの特定の部分にシークする機能を追加しましょう。スライダーのpointerdownハンドラー内にseek関数があり、そこでtimeを更新できます。

function seek(e) {
	const { left, width } = div.getBoundingClientRect();

	let p = (e.clientX - left) / width;
	if (p < 0) p = 0;
	if (p > 1) p = 1;

	time = p * duration;
}

トラックが終わったら、優しく巻き戻しましょう

<audio
	{src}
	bind:currentTime={time}
	bind:duration
	bind:paused
	onended={() => {
		time = 0;
	}}
></audio>

<audio>と<video>の完全なバインディングセットは次のとおりです。7つの読み取り専用バインディング...

• duration — 合計時間（秒単位）
• buffered — {start, end}オブジェクトの配列
• seekable — 同上
• played — 同上
• seeking — ブール値
• ended — ブール値
• readyState — 0から4までの数値（両端含む）

...と、5つの双方向バインディング

• currentTime — 再生ヘッドの現在の位置（秒単位）
• playbackRate — 再生速度の調整（1が「通常」）
• paused — これは自明でしょう
• volume — 0から1までの値
• muted — trueの場合ミュートされるブール値

さらに、ビデオには読み取り専用のvideoWidthとvideoHeightのバインディングがあります。