你可以绑定 <audio> 和 <video> 元素的属性，这使得构建自定义播放器 UI 变得容易，比如 AudioPlayer.svelte。

首先，添加 <audio> 元素及其绑定（我们将使用 src、duration 和 paused 的简写形式）：

<div class={['player', { paused }]}>
	<audio
		{src}
		bind:currentTime={time}
		bind:duration
		bind:paused
	></audio>

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

接下来，为 <button> 添加一个事件处理程序来切换 paused 状态：

<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> 的完整绑定集合如下 — 七个只读绑定...

• duration — 总时长，以秒为单位
• buffered — 包含 {start, end} 对象的数组
• seekable — 同上
• played — 同上
• seeking — 布尔值
• ended — 布尔值
• readyState — 介于（包括）0 和 4 之间的数字

...以及五个双向绑定：

• currentTime — 播放头的当前位置，以秒为单位
• playbackRate — 加快或减慢播放速度（1 为’正常’速度）
• paused — 这个不用解释了
• volume — 介于 0 和 1 之间的值
• muted — 布尔值，true 表示静音

视频额外还有只读的 videoWidth 和 videoHeight 绑定。