Flutter音频播放插件fwfh_just_audio的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

JustAudioFactory

WidgetFactory 扩展用于使用 just_audio 插件渲染音频。这是 flutter_widget_from_html_core 包的配套插件。

Getting Started

将以下内容添加到你的应用程序的 pubspec.yaml 文件中：

dependencies:
  flutter_widget_from_html_core: any
  fwfh_just_audio: ^0.15.2
平台特定配置
iOS

这个包使用 just_audio 来播放音频，该依赖项使用麦克风 API。默认情况下，App Store 需要一个用途描述，可以通过编辑 ios/Podfile 来跳过。详见其 pub.dev 页面上的详细说明。

如果你不需要 <AUDIO> 标签支持（例如，你的 HTML 永远不会包含该标签），最好切换到核心包，并使用它的一个子集 mixins。有关更多详情，请参阅 Extensibility。

Usage

然后使用带有自定义工厂的 HtmlWidget：

import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
import 'package:fwfh_just_audio/fwfh_just_audio.dart';

// ...

HtmlWidget(
  html,
  factoryBuilder: () => MyWidgetFactory(),
)

// ...

class MyWidgetFactory extends WidgetFactory with JustAudioFactory {
}

完整示例 Demo

以下是一个完整的示例代码，展示如何使用 fwfh_just_audio 插件来播放音频：

import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
import 'package:fwfh_just_audio/fwfh_just_audio.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'fwfh_just_audio',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('JustAudioFactory Demo'), // 设置应用栏标题
        ),
        body: Center(
          child: HtmlWidget(
            '''
<audio controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3">
  <code>AUDIO</code> support is not enabled.
</audio>''', // 音频文件 URL
            factoryBuilder: () => MyWidgetFactory(), // 使用自定义工厂
          ),
        ),
      ),
    );
  }
}

class MyWidgetFactory extends WidgetFactory with JustAudioFactory {} // 自定义工厂类

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用Flutter音频播放插件fwfh_just_audio的代码示例。这个插件是基于just_audio库的一个封装，提供了更简洁的API来播放音频。

首先，确保你已经在pubspec.yaml文件中添加了依赖：

dependencies:
  flutter:
    sdk: flutter
  fwfh_just_audio: ^最新版本号  # 请替换为实际最新版本号

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

接下来，在你的Flutter项目中，你可以按照以下步骤使用fwfh_just_audio来播放音频。

1. 导入插件

在你的Dart文件中导入插件：

import 'package:fwfh_just_audio/fwfh_just_audio.dart';

2. 创建一个音频播放器实例

你可以创建一个全局的音频播放器实例，或者在你需要的组件中创建。这里展示如何在组件中创建：

import 'package:flutter/material.dart';
import 'package:fwfh_just_audio/fwfh_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> {
  late FwfhAudioPlayer _audioPlayer;

  @override
  void initState() {
    super.initState();
    _audioPlayer = FwfhAudioPlayer();
    // 加载音频文件，这里假设你有一个名为'audio.mp3'的文件在assets文件夹中
    _audioPlayer.setAudioSource(AudioSource.uri(
      Uri.parse('assets/audio.mp3'),
    ));
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Player'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                await _audioPlayer.play();
              },
              child: Text('Play'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () async {
                await _audioPlayer.pause();
              },
              child: Text('Pause'),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () async {
                await _audioPlayer.stop();
              },
              child: Text('Stop'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 配置assets

如果你使用的是本地音频文件，别忘了在pubspec.yaml中配置assets：

flutter:
  assets:
    - assets/audio.mp3

4. 运行应用

现在你可以运行你的Flutter应用，点击按钮来播放、暂停和停止音频。

这个示例展示了如何使用fwfh_just_audio插件的基本功能。fwfh_just_audio还提供了更多的功能，比如音量控制、播放进度控制等，你可以参考其官方文档来获取更多信息。

回到顶部