Flutter音视频进度条插件audio_video_progress_bar的使用

audio_video_progress_bar 是一个用于显示或更改音频或视频流位置的进度条小部件。它本身并不播放音频或视频，而是与音频或视频播放器配合使用，以直观地展示播放进度和缓冲状态。

功能特点

• 显示播放进度：通过 progress 参数设置当前播放时间。
• 显示缓冲进度：通过 buffered 参数设置已缓冲的时间。
• 总时长：通过 total 参数设置媒体的总时长。
• 拖动选择时间点：通过 onSeek 回调函数实现用户拖动进度条选择播放时间点的功能。
• 自定义样式：支持自定义进度条的颜色、高度、圆角等样式属性。
• 时间标签位置：可以设置时间标签的位置（如上下方或两侧）。

示例代码

1. 简单静态示例

ProgressBar(
  progress: Duration(milliseconds: 1000),
  buffered: Duration(milliseconds: 2000),
  total: Duration(milliseconds: 5000),
  onSeek: (duration) {
    print('User selected a new time: $duration');
  },
),

2. 结合播放器使用的动态示例

通常情况下，我们会将 ProgressBar 包装在一个 StreamBuilder 中，以便根据播放器的状态实时更新进度条。以下是一个完整的示例，展示了如何与 just_audio 插件结合使用：

主要依赖库

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  audio_video_progress_bar: ^latest_version
  just_audio: ^latest_version

完整示例代码

import 'package:audio_video_progress_bar/audio_video_progress_bar.dart';
import 'package:flutter/material.dart';
import 'package:just_audio/just_audio.dart';

class AudioPlayerManager {
  final AudioPlayer player = AudioPlayer();

  Stream<DurationState> get durationState => player.positionStream
      .combineLatest3(
        player.bufferedPositionStream,
        player.durationStream,
        (position, buffered, duration) => DurationState(
          position,
          buffered,
          duration ?? Duration.zero,
        ),
      );

  Future<void> init() async {
    // 初始化播放器并加载音频文件
    await player.setUrl('https://example.com/your-audio-file.mp3');
  }

  void dispose() {
    player.dispose();
  }
}

class DurationState {
  const DurationState(this.progress, this.buffered, this.total);
  final Duration progress;
  final Duration buffered;
  final Duration total;
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeWidget(),
    );
  }
}

class HomeWidget extends StatefulWidget {
  @override
  _HomeWidgetState createState() => _HomeWidgetState();
}

class _HomeWidgetState extends State<HomeWidget> {
  late AudioPlayerManager manager;

  @override
  void initState() {
    super.initState();
    manager = AudioPlayerManager();
    manager.init();
  }

  @override
  void dispose() {
    manager.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Audio Player')),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          children: [
            Expanded(
              child: StreamBuilder<DurationState>(
                stream: manager.durationState,
                builder: (context, snapshot) {
                  final durationState = snapshot.data;
                  final progress = durationState?.progress ?? Duration.zero;
                  final buffered = durationState?.buffered ?? Duration.zero;
                  final total = durationState?.total ?? Duration.zero;
                  return ProgressBar(
                    progress: progress,
                    buffered: buffered,
                    total: total,
                    onSeek: (duration) {
                      manager.player.seek(duration);
                    },
                  );
                },
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                StreamBuilder<PlayerState>(
                  stream: manager.player.playerStateStream,
                  builder: (context, snapshot) {
                    final playerState = snapshot.data;
                    final processingState = playerState?.processingState;
                    final playing = playerState?.playing;
                    if (processingState == ProcessingState.loading ||
                        processingState == ProcessingState.buffering) {
                      return Container(
                        margin: EdgeInsets.all(8.0),
                        width: 32.0,
                        height: 32.0,
                        child: CircularProgressIndicator(),
                      );
                    } else if (playing != true) {
                      return IconButton(
                        icon: Icon(Icons.play_arrow),
                        iconSize: 32.0,
                        onPressed: manager.player.play,
                      );
                    } else if (processingState != ProcessingState.completed) {
                      return IconButton(
                        icon: Icon(Icons.pause),
                        iconSize: 32.0,
                        onPressed: manager.player.pause,
                      );
                    } else {
                      return IconButton(
                        icon: Icon(Icons.replay),
                        iconSize: 32.0,
                        onPressed: () => manager.player.seek(Duration.zero),
                      );
                    }
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

自定义样式

你可以通过传递不同的参数来自定义 ProgressBar 的外观。例如：

ProgressBar(
  progress: progress,
  buffered: buffered,
  total: total,
  progressBarColor: Colors.red, // 进度条颜色
  baseBarColor: Colors.white.withOpacity(0.24), // 底部背景颜色
  bufferedBarColor: Colors.white.withOpacity(0.24), // 缓冲部分颜色
  thumbColor: Colors.white, // 拖动手柄颜色
  barHeight: 3.0, // 进度条高度
  thumbRadius: 5.0, // 拖动手柄半径
  onSeek: (duration) {
    _player.seek(duration);
  },
  timeLabelLocation: TimeLabelLocation.sides, // 时间标签位置
);

总结

audio_video_progress_bar 是一个非常实用且易于集成的插件，能够帮助开发者快速实现音视频播放器中的进度条功能。通过与 just_audio 或其他播放器插件结合使用，可以轻松构建出功能完善的音视频播放界面。希望这篇教程对你有所帮助！如果你有任何问题或需要进一步的帮助，请随时提问。