Flutter音频波形展示插件flutter_audio_waveforms的使用

Flutter音频波形展示插件flutter_audio_waveforms的使用

Pub.dev Badge MIT License Badge

一个用于轻松地在您的应用程序中添加音频波形的UI库，并提供了多种定制选项。

Web Demo - Flutter Audio Waveforms Web Demo

特性

您可以使用以下可用的波形类型：

  • 多边形
  • 矩形
  • 波浪形
  • 曲线多边形

需要为波形添加渐变？没问题！您将获得其他定制选项。

想要一个内置的活动轨道来播放音频？ 你也可以得到它！

查看包提供的简短演示 在这里

开始使用

该包可以让你添加波形并自定义它们。 这基本上是一个带有额外功能（如显示播放音频的活动轨道）的波形UI库。

所以它依赖于你提供必要的音频数据，以便绘制波形。 我们需要的数据是一系列代表音频的点/样本。

你可以使用这个程序 audiowaveform 来获取音频json文件，这将为我们提供样本。 安装此程序后，在终端中使用以下命令生成音频的json文件。

audiowaveform -i test.mp3 -o test.json

生成的数据需要遵循一些规则进行处理，以正确绘制波形。要处理这些数据，请使用 这个处理器。

一旦你有了处理后的数据点列表，你就可以将其传递给任何可用的波形并开始使用它们。

查看 这篇文章 以获取更详细的介绍。

使用方法

所有可用波形的使用方法相同，只有不同波形具有更多/更少的定制选项。

// 对于常规波形
PolygonWaveform( 
  samples: [],
  height: height,
  width: width, 
)

// 如果你想为播放音频添加活动轨道，请传递 [maxDuration] 和 [elapsedDuration]
PolygonWaveform( 
  samples: [],
  height: height,
  width: width,
  maxDuration: maxDuration,
  elapsedDuration: elapsedDuration, 
)

查找详细 示例。

属性

maxDuration:

音频的最大持续时间。

elapsedDuration:

音频的已过持续时间。

samples:

音频数据样本列表。

检查 开始使用 部分了解如何生成这些数据。

height :

波形高度。

width :

波形宽度。

定制选项

inactiveColor :

非活动波形的颜色。

activeColor :

活动波形的颜色。

inactiveGradient :

非活动波形的渐变。

activeGradient :

活动波形的渐变。

absolute :

绘制的波形是一侧还是两侧取决于 invert 设置。

默认值为 false。

invert :

翻转/倒置波形。

默认值为 false。

borderWidth :

围绕波形的边框宽度。

仅适用于 RectangleWaveform。

isRoundedRectangle :

如果为true，则绘制圆角矩形而不是普通矩形。

仅适用于 RectangleWaveform。

isCentered :

如果为true，则矩形沿Y轴居中。

仅适用于 RectangleWaveform。

strokeWidth :

波形的描边宽度。

仅适用于 SquigglyWaveform, CurvedPolygonWaveform。

inactiveBorderColor :

非活动波形的边框颜色。

仅适用于 RectangleWaveform。

activeBorderColor :

活动波形的边框颜色。

仅适用于 RectangleWaveform。

showActiveWaveform :

是否显示活动波形。

默认值为 true。

更多定制选项即将推出！

贡献指南

  • 功能请求： 如果你有任何新的功能想法可以帮助改进这个包，请通过在此处 提交问题 来告诉我。

  • 改进： 如果你有任何关于改进这个包的建议，无论是API还是性能方面，请通过在此处 提交问题 来告诉我。

  • Bug报告： 如果你遇到了任何不应该发生的事情，请在此处 提交问题 并描述问题以及如何重现它，附上代码和预览图（如果可能）。

其他信息

最初出于好奇的一个挑战，现在成为一个我希望对你有用的包。实际上构建它真的很有趣。

在构建过程中学到了很多东西，希望未来能做得更好。

如果这个包对你有帮助，请考虑给我的仓库点个星星，这对我来说非常重要，让我继续努力工作 🤓。随时欢迎来 Twitter 找我聊天。

示例代码

import 'package:audioplayers/audioplayers.dart';
import 'package:example/load_audio_data.dart';
import 'package:example/waveforms_dashboard.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_audio_waveforms/flutter_audio_waveforms.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Audio Waveforms',
      home: WaveformsDashboard(),
    );
  }
}

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

  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  late Duration maxDuration;
  late Duration elapsedDuration;
  late AudioCache audioPlayer;
  late List<double> samples;
  late int totalSamples;

  late List<String> audioData;

  List<List<String>> audioDataList = [
    [
      'assets/dm.json',
      'dance_monkey.mp3',
    ],
    [
      'assets/soy.json',
      'shape_of_you.mp3',
    ],
    [
      'assets/sp.json',
      'surface_pressure.mp3',
    ],
  ];

  Future<void> parseData() async {
    final json = await rootBundle.loadString(audioData[0]);
    Map<String, dynamic> audioDataMap = {
      "json": json,
      "totalSamples": totalSamples,
    };
    final samplesData = await compute(loadparseJson, audioDataMap);
    await audioPlayer.load(audioData[1]);
    await audioPlayer.play(audioData[1]);
    // maxDuration in milliseconds
    await Future.delayed(const Duration(milliseconds: 200));

    int maxDurationInmilliseconds = await audioPlayer.fixedPlayer!.getDuration();

    maxDuration = Duration(milliseconds: maxDurationInmilliseconds);
    setState(() {
      samples = samplesData["samples"];
    });
  }

  [@override](/user/override)
  void initState() {
    // TODO: implement initState
    super.initState();
    // Change this value to number of audio samples you want.
    // Values between 256 and 1024 are good for showing [RectangleWaveform] and [SquigglyWaveform]
    // While the values above them are good for showing [PolygonWaveform]
    totalSamples = 1000;
    audioData = audioDataList[0];
    audioPlayer = AudioCache(
      fixedPlayer: AudioPlayer(),
    );

    samples = [];
    maxDuration = const Duration(milliseconds: 1000);
    elapsedDuration = const Duration();
    parseData();
    audioPlayer.fixedPlayer!.onPlayerCompletion.listen((_) {
      setState(() {
        elapsedDuration = maxDuration;
      });
    });
    audioPlayer.fixedPlayer!.onAudioPositionChanged
        .listen((Duration timeElapsed) {
      setState(() {
        elapsedDuration = timeElapsed;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    const sizedBox = SizedBox(
      height: 30,
      width: 30,
    );
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Flutter Audio Waveforms'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          PolygonWaveform(
            maxDuration: maxDuration,
            elapsedDuration: elapsedDuration,
            samples: samples,
            height: 300,
            width: MediaQuery.of(context).size.width,
          ),
          sizedBox,
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  audioPlayer.fixedPlayer!.pause();
                },
                child: const Icon(
                  Icons.pause,
                ),
              ),
              sizedBox,
              ElevatedButton(
                onPressed: () {
                  audioPlayer.fixedPlayer!.resume();
                },
                child: const Icon(Icons.play_arrow),
              ),
              sizedBox,
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    audioPlayer.fixedPlayer!
                        .seek(const Duration(milliseconds: 0));
                  });
                },
                child: const Icon(Icons.replay_outlined),
              ),
            ],
          )
        ],
      ),
    );
  }
}
1 回复

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


当然，下面是一个关于如何使用 flutter_audio_waveforms 插件在 Flutter 中展示音频波形的示例代码。这个插件可以帮助你从音频文件中生成波形数据并在应用中展示。

首先，你需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_audio_waveforms: ^x.y.z  # 请替换为最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来是完整的示例代码，包括如何加载音频文件并展示波形：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Audio Waveforms Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AudioWaveformScreen(),
    );
  }
}

class AudioWaveformScreen extends StatefulWidget {
  @override
  _AudioWaveformScreenState createState() => _AudioWaveformScreenState();
}

class _AudioWaveformScreenState extends State<AudioWaveformScreen> {
  final AudioWaveformController _controller = AudioWaveformController();
  List<double>? _waveformData;

  @override
  void initState() {
    super.initState();
    _loadAudioWaveform('path/to/your/audio/file.mp3');
  }

  Future<void> _loadAudioWaveform(String filePath) async {
    try {
      final waveformData = await _controller.loadWaveformFromPath(filePath);
      setState(() {
        _waveformData = waveformData;
      });
    } catch (e) {
      print("Error loading waveform: $e");
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Waveform Demo'),
      ),
      body: Center(
        child: _waveformData == null
            ? CircularProgressIndicator()
            : AudioWaveform(
                waveformData: _waveformData!,
                barWidth: 2.0,
                barSpacing: 1.0,
                height: 200.0,
                backgroundColor: Colors.grey[200]!,
                waveColor: Colors.blue,
              ),
      ),
    );
  }

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

关键点解释：

  1. 依赖导入：在 pubspec.yaml 中添加 flutter_audio_waveforms 依赖。
  2. 控制器初始化：AudioWaveformController 用于管理波形的加载和处理。
  3. 加载波形数据：在 initState 方法中调用 _loadAudioWaveform 方法加载音频文件的波形数据。你需要将 'path/to/your/audio/file.mp3' 替换为实际的音频文件路径。
  4. 波形展示：使用 AudioWaveform 小部件展示波形数据。
  5. 错误处理：在加载波形数据时，使用 try-catch 块捕获可能的错误。
  6. 资源释放：在 dispose 方法中释放控制器资源，避免内存泄漏。

确保你有一个有效的音频文件路径，并且该文件位于你的项目目录或设备的存储中。如果你使用的是本地文件，你可能需要配置对本地文件的访问权限（例如在 Android 的 AndroidManifest.xml 中添加文件访问权限）。

回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！