30:T1249,md` ### Options All options can be set in the options object of the Timer constructor.

\`duration\`: length of the timer in seconds. Defaults to \`1\`. Same as [HTMLMediaElement.duration](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/duration).
\`currentTime\`: current playback time in seconds. Defaults to \`0\`. Same as [HTMLMediaElement.currentTime](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/currentTime).
\`autoplay\`: indicates whether playback should automatically begin. Defaults to \`false\`. Same as [HTMLMediaElement.autoplay](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/autoplay).
\`loop\`: controls whether the media element should start over when it reaches the end. Defaults to \`false\`. Same as [HTMLMediaElement.loop](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loop).
\`playbackRate\`: sets the rate at which the media is being played back. Defaults to \`1.0\`. Same as [HTMLMediaElement.playbackRate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate).
\`defaultPlaybackRate\`: indicates the default playback rate for the media. Defaults to \`1.0\`. Same as [HTMLMediaElement.defaultPlaybackRate](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/defaultPlaybackRate). Note that setting defaultPlaybackRate has no effect on the play rate, as stated by the standard.
\`delay\`: approximate time in milliseconds between two successive \`timeupdate\` events. Defaults to 200
\`onstep\`: a function that will be called on each new animation frame when playing with the current time in seconds as its unique argument. Defaults to undefined
\`invalidation\`: an optional promise that will dispose of the internal resources if resolved. Defaults to undefined

### Properties All options can be get and set as properties of the timer object as with [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement), for example: ~~~js timer.loop = false; const t = timer.duration; timer.currentTime = 3 ~~~ Other properties:

\`paused\`: _read-only_. tells whether the media element is paused. Same as [HTMLMediaElement.paused](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/paused).

### Methods

\`pause()\`: pause playback of the timer. If the timer is already in a paused state this method will have no effect.. Same as [HTMLMediaElement.pause()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause).
\`play()\`: attempts to begin playback of the timer (it will always succeed, contrarily to HTMLMediaElement.play()). It returns a Promise which is resolved when playback has been successfully started (always). Same as [HTMLMediaElement.play()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play).

### Events

\`ended\`: fired when playback or streaming has stopped because the end of the timer was reached. Same as [HTMLMediaElement ended event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event).
\`pause\`: sent when a request to pause an activity is handled and the activity has entered its paused state, most commonly after the timer has been paused through a call to the pause() method. Same as [HTMLMediaElement pause event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event).
\`play\`: fired when the paused property is changed from true to false, as a result of the play() method, or the autoplay attribute. Same as [HTMLMediaElement play event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event).
\`ratechange\`: fired when the playback rate has changed. Same as [HTMLMediaElement ratechange event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event).
\`timeupdate\`: fired when the time indicated by the currentTime attribute has been updated. Same as [HTMLMediaElement timeupdate event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event).
\`durationchange\`: fired when the duration attribute has been updated. Same as [HTMLMediaElement durationchange event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event).

`31:T12a0,// This implementation though a class has the benefit of using methods instead of functions, // but two drawbacks: // - a lot of internal ._property are exposed // - we prefer to use "mediatize" that adds the Media API to an existing element, instead of creating a new one class Timer_obsolete extends EventTarget { constructor({ duration = 1, currentTime = 0, autoplay = false, loop = false, defaultPlaybackRate = 1.0, playbackRate = 1.0, delay = 200, onstep, invalidation } = {}) { super(); // in seconds this.duration = duration; this.currentTime = currentTime; this.autoplay = autoplay; this.loop = loop; this.defaultPlaybackRate = defaultPlaybackRate; this.playbackRate = playbackRate; this.delay = delay; this.onstep = onstep; if (invalidation) { invalidation.then(() => { this._dispose(); }); } if (this.autoplay) { this.play(); } } get duration() { return this._duration; } set duration(value) { const first = this._duration === undefined; // It seems that HTMLVideoElement rounds to 6 digits. We do the same this._duration = Math.max(0, Math.round(Math.abs(+value) * 1e6) / 1e6); if (!first) { // don't dispatch on init this.dispatchEvent(new Event('durationchange')); } } get currentTime() { // It seems that HTMLVideoElement rounds to 6 digits. We do the same return Math.min( this.duration, Math.max( 0, Math.round( (this._startTime + (this.playbackRate * this._elapsed) / 1000) * 1e6 ) / 1e6 ) ); } set currentTime(value) { const first = this._startTime === undefined; this._startTime = Math.min(this.duration, Math.max(0, +value)); this._init(); if (!first) { // don't dispatch on init this.dispatchEvent(new Event('timeupdate')); } } get paused() { return this._startTimestamp === undefined; } get autoplay() { return this._autoplay; } set autoplay(value) { this._autoplay = !!value; } get loop() { return this._loop; } set loop(value) { this._loop = !!value; } get playbackRate() { return this._playbackRate; } set playbackRate(value) { if (+value > 0) { if (+value !== this.playbackRate) { this._playbackRate = +value; this.dispatchEvent(new Event('ratechange')); // force the use of the setter for its side effects // but it's not explicit - we should do better this.currentTime = this.currentTime; } } else { throw new Error("NotSupportedError"); } } get defaultPlaybackRate() { return this._defaultPlaybackRate; } set defaultPlaybackRate(value) { if (+value > 0) { if (+value !== this.defaultPlaybackRate) { this._defaultPlaybackRate = +value; this.dispatchEvent(new Event('ratechange')); } } else { throw new Error("NotSupportedError"); } } _init() { // in milliseconds this._elapsed = 0; this._startTimestamp = undefined; // count this._requestID = undefined; } _dispose() { cancelAnimationFrame(this._requestID); } _stop(stopTime) { cancelAnimationFrame(this._requestID); if (stopTime !== undefined) { this.currentTime = stopTime; this.dispatchEvent(new Event('timeupdate')); } else { // force the use of the setter for its side effects // but it's not explicit - we should do better this.currentTime = this.currentTime; } this.dispatchEvent(new Event('pause')); } _step(t) { if (this._startTimestamp === undefined) { this._startTimestamp = t; this._timeupdateStartTimestamp = t; this.dispatchEvent(new Event('play')); } this._elapsed = t - this._startTimestamp; this._timeupdateElapsed = t - this._timeupdateStartTimestamp; // if hooks have been registered, call them with the current time if (this.onstep) { this.onstep(this.currentTime); } // dispatch periodic timeupdate events if (this._timeupdateElapsed >= this.delay) { this._timeupdateStartTimestamp += this.delay; this.dispatchEvent(new Event('timeupdate')); } if (this.currentTime < this.duration) { this._requestID = requestAnimationFrame(this._step.bind(this)); } else { this._stop(this.duration); this.dispatchEvent(new Event('ended')); if (this.loop) { this.play(); } } } pause() { this._stop(); } play() { if (this.currentTime === this.duration) { this.currentTime = 0; } this._requestID = requestAnimationFrame(this._step.bind(this)); return Promise.resolve(undefined); } }32:[{"id":"0b3514047012094225ea00b61c834a86529bb0b6870165c97a24b5db68bbf964eb594b75f57e48f5517ed10988c0f181e906dc72867bea7ed06275ec2b52f0ca","href":"https://static.observableusercontent.com/files/0b3514047012094225ea00b61c834a86529bb0b6870165c97a24b5db68bbf964eb594b75f57e48f5517ed10988c0f181e906dc72867bea7ed06275ec2b52f0ca","name":"timer_media_sylvain_bug.mp4","type":"video/mp4","lastModified":1610055619079.372,"size":133475}] 2e:{"title":"Timer Media","cells":[{"id":0,"value":"md`# Timer Media\n\n> A timer implemented as an HTMLMediaElement.\n\nIt's an alternative to [Scrubber](https://observablehq.com/@mbostock/scrubber) when you just want to specify the duration.\n\nYou need to combine it with [videoControls](https://observablehq.com/@severo/detached-video-controls) that provides a user interface. The timer provides the same API as HTMLVideoElement: you can autoplay, loop, change the current time, change the playback rate...\n\n---\n\n_See also [mediatize()](https://observablehq.com/@severo/mediatize) to animate your canvas, SVG, etc._\n\n---\n\nInstall with:\n\n~~~js\nimport {Timer} from '@severo/timer-media'\n~~~\n\nCreate:\n\n~~~js\ntimer = new Timer(options)\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"animation(timer3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"videoControls(timer3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"md`## Examples\n\nCreate a Timer that lasts 4 seconds and starts at t = 1s. It will not autoplay, but will loop when it reaches the end. It will be played at a 0.5x speed, so that the total time to reach the end of the timer will be 6s.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"timer = new Timer({\n duration: 4,\n currentTime: 1,\n autoplay: false,\n loop: true,\n playbackRate: 0.5,\n defaultPlaybackRate: 1.,\n delay: 200\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"viewof currentTime = videoControls(timer)","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"currentTime","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"md`Note that the timer does not provide any user interface. But you can use [\\`videoControls\\`](https://observablehq.com/@severo/detached-video-controls) to bind the timer to a player interface (it works on any object that implements the HTMLMediaElement interface)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":284,"value":"md`You can set properties:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"timer2 = {\n const timer = new Timer();\n timer.currentTime = 0.1;\n timer.loop = true;\n return timer;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"md`You can get properties:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"timer2.duration","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"timer2.currentTime","pinned":true,"hidden":false,"mode":"ojs"},{"id":295,"value":"timer2.paused","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"md`You can listen to events:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"{\n let loops = 0;\n const div = html``;\n function update() {\n div.innerHTML = `The timer has looped ${loops} times since the page has loaded.`;\n }\n function count() {\n loops += 1;\n update();\n }\n timer2.addEventListener('ended', count);\n invalidation.then(() => timer2.removeEventListener('ended', count));\n update();\n timer2.play();\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"md`As with a video, you can also pull the currentTime regularly, instead of listening to the timeupdate event. It's useful to animate a SVG, a canvas, or a Three.js scene for example:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"timer3 = new Timer({ duration: 10, autoplay: true, loop: true, delay: 1000 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"videoControls(timer3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"animation(timer3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"function animation(timer) {\n const height = 33;\n const radius = height / 2 - 5;\n const context = DOM.context2d(width, height);\n let frame;\n\n (function tick() {\n const x =\n ((Math.sin(timer3.currentTime) + 1) / 2) * (width - 2 * radius) + radius;\n context.clearRect(0, 0, width, height);\n context.beginPath();\n context.arc(x, height / 2, radius, 0, 2 * Math.PI);\n context.fill();\n frame = requestAnimationFrame(tick);\n })();\n\n invalidation.then(() => cancelAnimationFrame(frame));\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`---\n\n### Credits\n\n_Developed for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage._\n\n_Contribution by [Fabian Iwand](https://observablehq.com/@mootari)._\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`### CHANGELOG\n\n- 2021/03/18: the logic has been exported to https://observablehq.com/@severo/mediatize, and Timer is now only an \"mediatized\" instance of EventTarget. Code is very simple.\n- 2021/03/14: add an optional invalidation option to trigger disposal of the internal resources\n- 2021/03/14: use Event instead of CustomEvent\n- 2021-03-12: add \\`duration\\` setter and \\`durationchange\\` event\n- 2021-03-04: fix playbackRate setter: it must not change the currentTime\n- 2021-01-25: add \\`delay\\` option\n- 2021-01-22: fix the doc: the default value of \\`duration\\` is \\`1\\`\n- 2021-01-08: _thanks to [Fabian Iwand](https://observablehq.com/@mootari)._ remove useless dependency to https://observablehq.com/@severo/eventtarget\n- 2021-01-07: creation\n\n### TODO\n\n- bug (thanks @pierreleripoll):\n\n