Skip to main content
基本 Svelte
介绍
反应性
属性
逻辑
事件
绑定
类和样式
动作
转换
高级 Svelte
高级反应性
重用内容
运动
高级绑定
高级转换
上下文 API
特殊元素
<script module>
后续步骤
基本 SvelteKit
介绍
路由
加载数据
标题和 cookie
共享模块
表单
API 路由
$app/state
错误和重定向
高级 SvelteKit
钩子
页面选项
链接选项
高级路由
高级加载
环境变量
结论

你可以绑定到 <audio><video> 元素的属性,从而轻松(例如)构建自定义播放器 UI,如 AudioPlayer.svelte

¥You can bind to properties of <audio> and <video> elements, making it easy to (for example) build custom player UI, like AudioPlayer.svelte.

首先,添加 <audio> 元素及其绑定(我们将使用 srcdurationpaused 的简写形式):

¥First, add the <audio> element along with its bindings (we’ll use the shorthand form for src, duration and paused):

AudioPlayer
<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

¥Next, add an event handler to the <button> that toggles paused:

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

我们的音频播放器现在具有基本功能。让我们通过拖动滑块添加查找轨道特定部分的功能。在滑块的 pointerdown 处理程序中有一个 seek 函数,我们可以在其中更新 time

¥Our audio player now has basic functionality. Let’s add the ability to seek to a specific part of a track by dragging the slider. Inside the slider’s pointerdown handler there’s a seek function, where we can update time:

AudioPlayer
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;
}

曲目结束时,请善意地倒带:

¥When the track ends, be kind — rewind:

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

<audio><video> 的完整绑定集如下 - 七个只读绑定...

¥The complete set of bindings for <audio> and <video> is as follows — seven readonly bindings...

  • duration — 总持续时间,以秒为单位

    ¥duration — the total duration, in seconds

  • buffered{start, end} 对象数组

    ¥buffered — an array of {start, end} objects

  • seekable — 同上

    ¥seekable — ditto

  • played — 同上

    ¥played — ditto

  • seeking — 布尔值

    ¥seeking — boolean

  • ended — 布尔值

    ¥ended — boolean

  • readyState — 0 到 4 之间的数字(含)

    ¥readyState — number between (and including) 0 and 4

...和五个双向绑定:

¥...and five two-way bindings:

  • currentTime — 播放头的当前位置(以秒为单位)

    ¥currentTime — the current position of the playhead, in seconds

  • playbackRate — 加速或减速(1 是 ‘normal’)

    ¥playbackRate — speed up or slow down (1 is ‘normal’)

  • paused — 这个应该是不言自明的

    ¥paused — this one should be self-explanatory

  • volume — 0 到 1 之间的值

    ¥volume — a value between 0 and 1

  • muted — 布尔值,其中 true 被静音

    ¥muted — a boolean value where true is muted

视频还具有只读 videoWidthvideoHeight 绑定。

¥Videos additionally have readonly videoWidth and videoHeight bindings.

上一页 下一页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
	import AudioPlayer from './AudioPlayer.svelte';
	import { tracks } from './tracks.js';
</script>
 
<div class="centered">
	{#each tracks as track}
		<AudioPlayer {...track} />
	{/each}
</div>
 
<style>
	.centered {
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: center;
		gap: 0.5em;
		max-width: 40em;
		margin: 0 auto;
	}
</style>