-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
99 lines (74 loc) · 3.71 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
---
title: Web Audio playbackRate explained
slug: Web/Media/Audio_and_video_delivery/WebAudio_playbackRate_explained
page-type: guide
---
{{QuickLinksWithSubPages("/en-US/docs/Web/Media")}}
The {{domxref("HTMLMediaElement.playbackRate", "playbackRate")}} property of the {{ htmlelement("audio") }} and {{ htmlelement("video") }} elements allows us to change the speed, or rate, at which a piece of web audio or video is playing. This article explains `playbackRate` in detail.
## playbackRate basics
Let's starting by looking at a brief example of `playbackRate` usage:
```js
const audio = document.createElement("audio");
audio.setAttribute("src", "audiofile.mp3");
audio.playbackRate = 0.5;
```
Here we create an {{ htmlelement("audio") }} element, and set its `src` to a file of our choice. Next we set `playbackRate` to 0.5, which represents half normal speed (the `playbackRate` is a multiplier applied to the original rate).
## A complete example
Let's create a {{ htmlelement("video") }} element first, and set up video and playback rate controls in HTML:
```html
<video id="myVideo" controls>
<source
src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"
type="video/mp4" />
<source
src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"
type="video/webm" />
</video>
<form>
<input id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" />
<p>Playback Rate <span id="currentPbr">1</span></p>
</form>
```
And apply some JavaScript to it:
```js
window.onload = () => {
const v = document.getElementById("myVideo");
const p = document.getElementById("pbr");
const c = document.getElementById("currentPbr");
p.addEventListener(
"input",
() => {
c.innerHTML = p.value;
v.playbackRate = p.value;
},
false,
);
};
```
Finally, we listen for the `input` event firing on the {{ htmlelement("input") }} element, allowing us to react to the playback rate control being changed.
> **Note:** [Try out this example live](https://jsbin.com/UGIxoJis/1/edit), and try adjusting the playback rate control to see the effect.
## defaultPlaybackRate and ratechange
In addition to `playbackRate`, we also have a `defaultPlaybackRate` property available, which lets us set the default playback rate: the playback rate to which the media resets; for example, if we change the source of the video, or (in some browsers) when an `ended` event is generated.
So `defaultPlaybackRate` allows us to set the playback rate _before_ playing the media, while `playbackRate` allows us to change it during media playback.
There is also an event available called `ratechange`, which fires every time the `playbackRate` changes.
## Browser support
- Chrome 20+ ✔
- Firefox 20+ ✔
- IE 9+ ✔
- Safari 6+ ✔
- Opera 15+ ✔
- Mobile Chrome (Android) ✖
- Mobile Firefox 24+ ✔
- IE Mobile ✖
- Mobile Safari 6+ (iOS) ✔
- Opera Mobile ✖
### Notes
- Most browsers stop playing audio outside `playbackRate` bounds of 0.5 and 4, leaving the video playing silently. For most applications, it's recommended that you limit the range to between 0.5 and 4.
- The pitch of the audio track does not change when `playBackRate` is altered.
- Negative values indicating the media should play in reverse is not currently supported by most browsers.
- IE9+ switches to the default playback rate when an `ended` event is fired.
- Firefox generates a `ratechange` event when the media source is substituted.
- On iOS 7 you can only affect the `playbackRate` when the media is paused (not while it's playing).
## See also
- [Hyperaudio's Playback Rate Test](https://hyperaud.io/lab/pbr-test/)
- {{domxref("HTMLMediaElement")}}: interface which defines the {{domxref("HTMLMediaElement.playbackRate", "playbackrate")}} property.