Silvi-Player

Instant-feeling silence skipping for web video players.

SilviPlayer analyzes only the audio, lets playback start immediately, and progressively adds confirmed silent sections while the video is already playing. It is built for long lectures, courses, recordings, tutorials, and any video where dead air should disappear without making users wait for a full pre-processing step.

Why SilviPlayer?

• Play first, optimize in the background: users can start watching right away while Silvi keeps analyzing.
• Progressive results: confirmed silent ranges become skippable as soon as they are detected.
• Audio-only speed: MP4/MOV files use encoded audio byte ranges when possible, so large video payloads do not need full video decoding.
• Large-file friendly: avoids full-file PCM buffers on the fast path and processes audio in chunks.
• Private by design: analysis runs in the browser against the user's local File; no upload server is required.
• Real player behavior: instead of cutting media, Silvi adjusts playback rate and volume during silent ranges.
• Framework agnostic: drop it into vanilla JavaScript, React, Vue, Svelte, or your own player UI.

Features

• Fast MP4 analysis: reads encoded audio sample byte ranges and decodes them with WebCodecs when available.
• Chunked processing: analyzes audio windows without holding huge full-file PCM buffers.
• Progressive skipping: playback can start while analysis continues, and confirmed silent ranges are used as soon as they are found.
• Portable fallbacks: full audio decode for smaller files, then streaming analysis for unsupported formats.
• Framework agnostic: works with React, Vue, Svelte, or Vanilla JS.
• Plug and play: inline fallback worker means no extra configuration for bundlers.

The User Experience

Most silence-skipping tools feel slow because they wait for the whole file to be analyzed before doing anything useful. SilviPlayer is designed to feel immediate:

1. The user selects a video.
2. You set the video source and call processFile(file).
3. The user can press play immediately.
4. Silvi publishes silent ranges progressively.
5. When playback reaches a confirmed silent range, the player speeds through it automatically.

For supported MP4/MOV files, SilviPlayer takes the fastest route first: parse metadata, read encoded audio sample byte ranges, decode audio with WebCodecs, and analyze RMS windows. If that path is not available, it falls back gracefully.

Installation

npm install silvi-player

Usage

Vanilla JavaScript / TypeScript

import { SilviPlayer } from 'silvi-player';

const video = document.querySelector('video');
const fileInput = document.querySelector('input[type="file"]');

const silvi = new SilviPlayer({
  debug: true,
  minSilenceDuration: 1.0,
  skipPlaybackRate: 4,
  skipSilenceVolume: 0.01
});

silvi.attach(video, {
  onStatusChange: (status) => console.log('Silvi Status:', status),
  onSkip: (isSkipping) => console.log(isSkipping ? 'Skipping silence...' : 'Playing normally')
});

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file) {
    silvi.processFile(file);
  }
});

React

import { useRef, useEffect, useState } from 'react';
import { SilviPlayer } from 'silvi-player';

export const Player = () => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const silviRef = useRef(new SilviPlayer({ debug: true }));
  const [status, setStatus] = useState('Idle');

  useEffect(() => {
    if (videoRef.current) {
      silviRef.current.attach(videoRef.current, {
        onStatusChange: setStatus
      });
    }
    return () => silviRef.current.detach();
  }, []);

  const handleFile = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) silviRef.current.processFile(file);
  };

  return (
    <div>
      <input type="file" onChange={handleFile} />
      <p>Status: {status}</p>
      <video ref={videoRef} controls />
    </div>
  );
};

Vue 3

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { SilviPlayer } from 'silvi-player';

const videoRef = ref(null);
const status = ref('Idle');
const silvi = new SilviPlayer({ debug: true });

onMounted(() => {
  silvi.attach(videoRef.value, {
    onStatusChange: (s) => status.value = s
  });
});

onUnmounted(() => silvi.detach());

const handleFile = (e) => {
  const file = e.target.files[0];
  if (file) silvi.processFile(file);
};
</script>

<template>
  <input type="file" @change="handleFile" />
  <p>Status: {{ status }}</p>
  <video ref="videoRef" controls />
</template>

Svelte

<script>
  import { onMount, onDestroy } from 'svelte';
  import { SilviPlayer } from 'silvi-player';

  let videoElement;
  let status = 'Idle';
  const silvi = new SilviPlayer({ debug: true });

  onMount(() => {
    silvi.attach(videoElement, {
      onStatusChange: (s) => status = s
    });
  });

  onDestroy(() => silvi.detach());

  function handleFile(e) {
    const file = e.target.files[0];
    if (file) silvi.processFile(file);
  }
</script>

<input type="file" on:change={handleFile} />
<p>Status: {status}</p>
<video bind:this={videoElement} controls />

Configuration Options

| Option | Type | Default | Description | | --- | --- | --- | --- | | minSilenceDuration | number | 1.0 | Minimum duration (seconds) to consider as silence. | | rmsThreshold | number | 0.02 | Volume threshold for silence detection. | | skipPlaybackRate | number | 4 | Playback speed during silent segments. | | normalPlaybackRate | number | 1 | Playback speed during non-silent segments. | | skipSilenceVolume | number | 0.01 | Volume multiplier while fast-forwarding silent segments. | | skipStartPaddingSeconds | number | 0.1 | Silence kept before fast-forwarding starts. | | skipEndPaddingSeconds | number | 0.1 | Silence kept before fast-forwarding ends. | | sampleRate | number | 16000 | Sample rate for full-decode fallback analysis. | | analysisWindow | number | 0.25 | Audio window size in seconds. Larger is faster; smaller is more precise. | | fastAudioDecode | boolean | true | Use MP4/WebCodecs audio-only analysis when supported. | | fullDecodeMaxFileSize | number | 104857600 | Max size for full decode fallback before streaming mode. | | fastDecodeChunkSize | number | 4194304 | File chunk size for MP4 audio-only parsing. | | debug | boolean | false | Enable console logging. |

Detection Pipeline

Silvi first tries the fastest path for MP4, MOV, and M4V files:

1. Parse the container with MP4Box.js.
2. Read only the byte ranges that contain encoded audio samples.
3. Decode those samples with WebCodecs AudioDecoder.
4. Analyze PCM audio in analysisWindow chunks and publish confirmed silent ranges progressively.

If a specific MP4 variant cannot use byte-range reads, Silvi falls back to MP4Box's sequential audio extraction. If the browser or file does not support the MP4/WebCodecs path, Silvi falls back to full audio decode for smaller files, then hidden-video streaming analysis for large or unsupported files.

License

MIT