# Playlist and caching
Build a playlist and preload the next item in the background with the caching API.
Tip: open your browser's developer console and use the `player` and `THEOplayer` variables to interact with this demo.
### Playlist
PreviousNextCache next item now
The playlist is just an array of source descriptions — each click assigns the next one to `player.source`. Once playback passes 75% of the current item, `THEOplayer.cache.createTask()` starts caching the first 25% of the next item, so it starts faster. You can also trigger it manually with "Cache next item now".
```js
player.addEventListener('ended', () => {
player.autoplay = true;
player.source = playlist[active + 1].source;
});
// Cache part of an upcoming item:
const task = THEOplayer.cache.createTask(playlist[active + 1].source, { amount: '25%' });
task.start();
```
See the [`Cache` API](https://optiview.dolby.com/docs/theoplayer/v11/api-reference/web/interfaces/Cache).
Code
demo.html
```html
Playlist and caching
```