Subtitle Player #

A library for synchronizing subtitles with video and audio playback.

Features 📦 #

• ✅ Load SubRip, WebVTT and LRC formats
• ✅ Play, pause and seek support
• ✅ Adjust playback speed

Install 🚀 #

In the pubspec.yaml of your Flutter/Dart project, add the subtitle_player dependency:

dependencies:
    subtitle_player: ^1.0.0

Import the package in your project 📥 #

import 'package:subtitle_player/subtitle_player.dart';

Usage 🏗️ #

Create a SubtitleController and load a subtitle file

final subtitleController = SubtitleController();
subtitleController.loadSubtitle(Subtitle.fromWebVTT(content));

Start playing subtitle with your audio/video

subtitleController.play();

Subscribe to SubtitleController for changes using ValuelistenableBuilder, ListenableBuilder or AnimatedBuilder

// From the video player example

 Align(
    alignment: Alignment.bottomCenter,
    child: ValueListenableBuilder<SubtitlePlayerValue>(
        valueListenable: _subtitleController,
        builder: (context, subtitleValue, _) {
        if (subtitleValue.currentSubtitle.isEmpty) {
            return const SizedBox.shrink();
        }
        return Container(
            constraints: BoxConstraints(
                maxWidth: (MediaQuery.sizeOf(context).height *
                        _controller.value.aspectRatio) *
                    0.5),
            padding: const EdgeInsets.all(4),
            margin: const EdgeInsets.only(bottom: 8),
            decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(4),
            color: Colors.black.withOpacity(0.65),
            ),
            child: Text(
            subtitleValue.currentSubtitle,
            textAlign: TextAlign.center,
            style: const TextStyle(
                fontSize: 12,
                color: Colors.white,
                    ),
                ),
            );
        },
    ),
)

Alternatively, you can attach a listener to the audio/video playback's position and call the sync method whenever the position changes.

// Example with JustAudio

final player = AudioPlayer();
final positionStream = player.createPositionStream();

final streamSubscription = positionStream.listen((position) {
    subtitleController.sync(position);
});

// make sure to cancel the stream subscription when ready to release resources

Check the example project for more detailed usage examples both for video and audio playing.

Demo 📷 #

Contributions 🫱🏾‍🫲🏼 #

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a feature, please send a pull request.