Flutter自定义电台播放器插件custom_radio_player的使用

Flutter自定义电台播放器插件custom_radio_player的使用

简介

logo

likes popularity pub points

Flutter radio 插件能够精确地处理单个流媒体。该插件旨在最大化使用场景下发挥作用。Flutter Radio Player 可以在 Android 和 iOS 上本地播放音频内容,并且支持后台音乐播放功能。此外,该插件还深度集成了 Android 的 MediaSession 和 iOS 的 RemoteControl 能力(控制中心)。它还支持通过 wearOS 和 WatchOS 控制播放器。


功能

  • 支持 Android 和 iOS。
  • 支持后台音乐播放。
  • 与 watchOS 和 WearOS 集成良好。
  • 处理网络中断问题。
  • 高度响应式。
  • 开发者友好(代码库中添加了日志,便于追踪问题)。

响应性

与其他音乐播放插件不同,Flutter Radio Player 非常具有响应性。它通过事件和流与原生层通信,使插件在应用(Flutter)端和原生端都非常灵敏。

插件事件

此插件利用 Android 的 LocalBroadcaster 和 iOS 的 Notification Center 推送事件。以下是事件名称列表:

  • <code>flutter_radio_playing</code>
  • <code>flutter_radio_paused</code>
  • <code>flutter_radio_stopped</code>
  • <code>flutter_radio_error</code>
  • <code>flutter_radio_loading</code>

快速开始

以下是使用 custom_radio_player 插件的基本步骤:

1. 添加依赖到 pubspec.yaml

在项目的 pubspec.yaml 文件中添加以下内容:

dependencies:
  custom_radio_player: ^1.0.0

2. 安装依赖

运行以下命令安装依赖:

$ flutter pub get

3. 导入插件

在 Dart 文件中导入插件:

import 'package:custom_radio_player/custom_radio_player.dart';

4. 配置播放器

创建一个新的播放器实例。FlutterRadioPlayer 实例一次只能播放一个音频流。可以通过调用构造函数创建实例。请注意,不要在 Android 上创建多个实例,因为 FRP 使用了 FOREGROUND SERVICE 来保持服务在应用最小化时仍然运行。

FlutterRadioPlayer _flutterRadioPlayer = new FlutterRadioPlayer();

当您拥有一个 FRP 实例后,可以调用 init 方法来初始化平台特定的播放器准备。有关 API 详细信息,请参阅 FRP API

await _flutterRadioPlayer.init(
  "Flutter Radio Example", // 播放器名称
  "Live",                  // 播放状态
  "URL_HERE",              // 流媒体 URL
  "true"                   // 是否启用后台模式
);

初始化完成后,您可以调用 playOrPause 方法来切换音频流。

await _flutterRadioPlayer.playOrPause();

FRP 允许在播放器初始化后更改 URL。您可以通过调用 setUrl 方法更改流媒体 URL。

await _flutterRadioPlayer.setUrl('URL_HERE', "false");

上述方法会暂停现有 URL 并播放新设置的 URL。请参阅 FRP API 获取更多 API 文档。

除了上述方法,FRP 还提供了以下方法:

  • <code>stop()</code> - 停止所有流媒体播放并从 FOREGROUND SERVICE 中分离。再次使用插件前需要重新初始化。
await _flutterRadioPlayer.stop();
  • <code>start()</code> - 使用已初始化的对象启动音频流。
await _flutterRadioPlayer.start();
  • <code>pause()</code> - 使用已初始化的对象暂停音频流。
await _flutterRadioPlayer.pause();

此插件几乎处理了所有与播放单个音频流相关的任务,包括播放器元数据和网络中断等。请参考示例以了解 FRP 的具体功能。


iOS 和 Android 支持

如果插件无法正常初始化,请确保您的应用程序已授予后台进程权限。

Android 支持

AndroidManifest.xml 文件中添加以下权限:

<!--  插件所需的权限  -->
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
<uses-permission android:name="android.permission.INTERNET" />

<!--  插件所需的服务  -->
<application android:usesCleartextTraffic="true">
    <service android:name=".core.StreamingCore"/>
</application>
1 回复

更多关于Flutter自定义电台播放器插件custom_radio_player的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中,如果你想创建一个自定义的电台播放器插件,你可以使用custom_radio_player插件。这个插件允许你播放网络上的音频流,并且你可以自定义其外观和行为。以下是如何使用custom_radio_player插件的步骤:

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加custom_radio_player插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  custom_radio_player: ^0.1.0  # 请使用最新版本

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

2. 导入插件

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

import 'package:custom_radio_player/custom_radio_player.dart';

3. 初始化播放器

在你的initState方法中初始化播放器:

class RadioPlayerScreen extends StatefulWidget {
  [@override](/user/override)
  _RadioPlayerScreenState createState() => _RadioPlayerScreenState();
}

class _RadioPlayerScreenState extends State<RadioPlayerScreen> {
  CustomRadioPlayer _radioPlayer;

  [@override](/user/override)
  void initState() {
    super.initState();
    _radioPlayer = CustomRadioPlayer();
    _radioPlayer.init(); // 初始化播放器
  }

  [@override](/user/override)
  void dispose() {
    _radioPlayer.dispose(); // 释放资源
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Radio Player'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                await _radioPlayer.play('https://example.com/radio.mp3'); // 播放音频流
              },
              child: Text('Play'),
            ),
            ElevatedButton(
              onPressed: () async {
                await _radioPlayer.pause(); // 暂停播放
              },
              child: Text('Pause'),
            ),
            ElevatedButton(
              onPressed: () async {
                await _radioPlayer.stop(); // 停止播放
              },
              child: Text('Stop'),
            ),
          ],
        ),
      ),
    );
  }
}

4. 播放、暂停和停止

你可以使用playpausestop方法来控制音频的播放。play方法需要一个音频流的URL作为参数。

5. 自定义UI

你可以根据需要自定义播放器的UI。例如,你可以添加一个进度条、音量控制、播放列表等功能。

6. 处理状态

你可以使用CustomRadioPlayer提供的方法和回调来处理播放器的状态。例如,你可以监听播放器的状态变化,并在UI中显示当前播放状态。

7. 处理错误

在播放过程中可能会遇到错误,例如网络问题或无效的音频流URL。你可以使用try-catch块来捕获并处理这些错误。

try {
  await _radioPlayer.play('https://example.com/radio.mp3');
} catch (e) {
  print('Error: $e');
}

8. 其他功能

custom_radio_player插件可能还提供了其他功能,例如设置音量、跳转到特定时间点等。你可以查阅插件的文档以了解更多信息。

9. 发布和分享

如果你对custom_radio_player插件进行了自定义或扩展,你可以将其发布到pub.dev上,以便其他开发者使用。

10. 示例代码

以下是一个完整的示例代码:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Radio Player',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: RadioPlayerScreen(),
    );
  }
}

class RadioPlayerScreen extends StatefulWidget {
  [@override](/user/override)
  _RadioPlayerScreenState createState() => _RadioPlayerScreenState();
}

class _RadioPlayerScreenState extends State<RadioPlayerScreen> {
  CustomRadioPlayer _radioPlayer;

  [@override](/user/override)
  void initState() {
    super.initState();
    _radioPlayer = CustomRadioPlayer();
    _radioPlayer.init();
  }

  [@override](/user/override)
  void dispose() {
    _radioPlayer.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Radio Player'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () async {
                try {
                  await _radioPlayer.play('https://example.com/radio.mp3');
                } catch (e) {
                  print('Error: $e');
                }
              },
              child: Text('Play'),
            ),
            ElevatedButton(
              onPressed: () async {
                await _radioPlayer.pause();
              },
              child: Text('Pause'),
            ),
            ElevatedButton(
              onPressed: () async {
                await _radioPlayer.stop();
              },
              child: Text('Stop'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!