Recording Player

A player that plays Webfon call recordings in the browser, independently of the widget. A conversation's audio, camera streams, and screen share are played back in sync on a single timeline — with no server-side transcoding.

A recording consists of several .webm files, each carrying a single track. Which file belongs to whom/what, and its timing, is embedded inside the files; the player aligns them automatically. A typical conversation has at most five files:

File	Content
customer_audio.webm	Customer audio
agent_audio.webm	Agent audio
customer_video.webm	Customer camera
agent_video.webm	Agent camera
screen.webm	Screen share

The files are optional: a conversation without a camera or a screen share arrives with fewer files; the player aligns and plays whatever is available.

Try it quickly

To open and play your recording files directly in the browser without embedding anything, drag and drop them onto the Media Player tool.

Embedding in a page

You can add the player to your own page through the CDN (a script tag) or the npm package. Either way, the player is mounted into a container element whose size you provide.

CDN (script tag)

<!-- 1) the element the player will sit in (you set its size) -->
<div id="player" style="width: 960px; height: 540px"></div>

<!-- 2) load the player -->
<script src="https://assets.webfon.io/player.js"></script>

<!-- 3) mount it with the recording files -->
<script>
  const player = WebfonPlayer.mount('#player', {
    sources: [
      'https://cdn.example.com/rec/customer_audio.webm',
      'https://cdn.example.com/rec/agent_audio.webm',
      'https://cdn.example.com/rec/customer_video.webm',
      'https://cdn.example.com/rec/agent_video.webm',
      'https://cdn.example.com/rec/screen.webm',
    ],
  });
</script>

player.js publishes a global WebfonPlayer object and does not mount by itself — you mount the player as shown above, so the page layout stays entirely yours.

npm

For React, Vue, Svelte, or any project using a bundler:

yarn add @webfon/player

import { mountPlayer } from '@webfon/player';

const player = mountPlayer('#player', {
  sources: [customerAudio, agentAudio, screen],
});

The source list can also carry File objects instead of URLs (e.g. files picked through an <input type="file"> or drag & drop).

Mount options

The second argument of mount() / mountPlayer() carries the recording files plus a few switches that decide how much of the page the player is allowed to touch:

Option	Default	Description
sources	—	The recording files: an array of .webm URLs or File objects. May be left empty and supplied later with load().
showSourcesHeader	true	The header row of the source menu — the Sources title and the Add button that picks a .webm from the visitor's disk. Pass false when your own page decides what is played: only the files you supply can then be opened.
query	true	With no sources, the player reads the file list from the page address' ?src= parameter. Pass false so it never reads your URL.
manageDocument	true	The player writes the recording into the page title (document.title). Pass false to keep the title yours.

When embedding the player into a page of your own, the usual combination is:

const player = WebfonPlayer.mount('#player', {
  sources,
  showSourcesHeader: false,  // no file picking inside the player
  query: false,              // don't read ?src= from the page address
  manageDocument: false,     // don't touch the page title
});

Driving the player (API)

WebfonPlayer.mount() (and mountPlayer() on npm) returns an imperative handle. You can drive the player through that handle without remounting it:

Method	Description
load(sources)	Load / replace the source list — an array of .webm URLs or Files
clear()	Release all media and return to the empty state (the player stays mounted)
play() / pause()	Resume / pause playback
seek(seconds)	Jump to an absolute position (clamped to the recording)
getState()	Current state (loaded, playing, duration, tracks, speed…)
destroy()	Remove the player and release its resources

player.pause();
player.seek(30);
player.load([url1, url2]);  // load another recording
player.clear();             // release the media
player.destroy();           // remove it entirely

Requirements

• Source URLs must be HTTPS and CORS-enabled (Access-Control-Allow-Origin); otherwise the browser cannot read the file.
• The files are in the single-track WebM format produced by the Webfon recording infrastructure.
• Playback uses WebCodecs; a current desktop or mobile browser is required.

To learn the player's interface and controls → Interface & Usage.