Flutter音频进度条展示插件audio_progress_bars的使用

Flutter音频进度条展示插件audio_progress_bars的使用

audio_progress_bars 是一个在 Flutter 项目中轻松添加波形进度条的包。

开始使用

首先，你需要在你的 Flutter 项目中添加以下依赖：

dependencies:
  audio_progress_bars: "^0.0.1"

然后运行 flutter packages upgrade 或者在 IntelliJ 中更新你的包。

如何使用

下面是一个完整的示例代码，展示了如何使用 audio_progress_bars 插件来创建一个带有波形动画效果的进度条。

import 'dart:math';

import 'package:audio_progress_bars/audio_progress_bars.dart';
import 'package:flutter/material.dart';

void main() {
  // 运行应用程序
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 初始化状态
  [@override](/user/override)
  void initState() {
    super.initState();
  }

  // 创建一个包含随机高度值的列表
  final List<double> values = [];
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 获取媒体查询数据
    MediaQueryData queryData = MediaQuery.of(context);
    var rng = Random();

    // 填充列表
    for (var i = 0; i < 100; i++) {
      values.add(rng.nextInt(70) * 1.0);
    }

    // 返回应用程序的根部件
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: Column(
          children: [
            // 添加波形进度条
            AudioProgressBars(
              progressPercentage: 20, // 设置进度百分比
              listOfHeights: values, // 设置高度值列表
              width: queryData.size.width, // 设置宽度
              initalColor: Colors.grey, // 设置初始颜色
              progressColor: Colors.red, // 设置进度颜色
              backgroundColor: Colors.white, // 设置背景颜色
              timeInMilliSeconds: 2000, // 设置动画持续时间
              isHorizontallyAnimated: true, // 设置是否水平方向上动画
              isVerticallyAnimated: true, // 设置是否垂直方向上动画
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter音频进度条展示插件audio_progress_bars的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter音频进度条展示插件audio_progress_bars的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用audio_progress_bars插件来展示音频进度条的示例代码。这个插件可以帮助你方便地展示音频播放的进度。

首先，确保你的Flutter项目已经添加了audio_progress_bars依赖。在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  audio_progress_bars: ^x.y.z  # 请将x.y.z替换为当前最新版本号

然后运行flutter pub get来安装依赖。

接下来，你可以按照以下步骤在Flutter应用中实现音频进度条展示。

示例代码

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

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

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

class AudioPlayerScreen extends StatefulWidget {
  @override
  _AudioPlayerScreenState createState() => _AudioPlayerScreenState();
}

class _AudioPlayerScreenState extends State<AudioPlayerScreen> {
  final AudioPlayer _audioPlayer = AudioPlayer();
  Duration? _position = Duration.zero;
  Duration? _duration = Duration.zero;

  @override
  void initState() {
    super.initState();
    _initializeAudioPlayer();
  }

  Future<void> _initializeAudioPlayer() async {
    // 替换为你的音频文件URL或本地文件路径
    final Uri audioUri = Uri.parse('https://www.example.com/audiofile.mp3');
    await _audioPlayer.setAudioSource(AudioSource.uri(audioUri));
    _audioPlayer.positionStream.listen((position) {
      setState(() {
        _position = position;
      });
    });
    _audioPlayer.durationStream.listen((duration) {
      setState(() {
        _duration = duration;
      });
    });
  }

  void _playPause() {
    if (_audioPlayer.playing) {
      _audioPlayer.pause();
    } else {
      _audioPlayer.play();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Player with Progress Bar'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _playPause,
              child: Text(_audioPlayer.playing ? 'Pause' : 'Play'),
            ),
            SizedBox(height: 20),
            if (_duration != null)
              AudioProgressBar(
                duration: _duration!,
                position: _position!,
                barHeight: 10,
                barColor: Colors.blue,
                backgroundColor: Colors.grey[200]!,
                bufferColor: Colors.grey,
                isPlaying: _audioPlayer.playing,
                onDragEnd: (newPosition) {
                  _audioPlayer.seek(newPosition);
                },
              ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖安装：在pubspec.yaml中添加audio_progress_bars和just_audio依赖。
  2. 初始化音频播放器：在_AudioPlayerScreenState中初始化AudioPlayer实例，并设置音频源。
  3. 监听音频位置和时长：通过positionStream和durationStream监听音频的播放位置和总时长。
  4. 播放/暂停控制：通过_playPause方法控制音频的播放和暂停。
  5. 展示进度条：使用AudioProgressBar组件展示音频进度条，并根据音频的播放状态更新进度条。

这样，你就可以在Flutter应用中展示音频进度条，并实现基本的播放和暂停功能了。如果需要更多高级功能，可以参考audio_progress_bars和just_audio的官方文档。

回到顶部