Flutter音频播放插件modern_player的使用

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

Flutter音频播放插件modern_player的使用

虽然modern_player主要是一个视频播放插件,但它也支持音频播放。以下是如何在Flutter项目中集成和使用modern_player进行音频播放的详细步骤。

安装

首先,在你的pubspec.yaml文件中添加modern_player依赖:

dependencies:
  modern_player: ^latest_version

请确保将^latest_version替换为实际的最新版本号。

iOS配置

如果无法从外部源加载媒体,还需要在ios/Runner/Info.plist中添加以下内容:

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

同时,确保ios/Podfile中的以下行未被注释:

platform :ios, '9.0'

Android配置

为了从互联网加载媒体或字幕,需要在android/app/src/main/AndroidManifest.xml中声明INTERNET权限:

<uses-permission android:name="android.permission.INTERNET" />

如果遇到“Cleartext HTTP traffic to * is not permitted”的错误,需要在AndroidManifest.xml中添加android:usesClearTextTraffic="true"标志,或者定义一个新的网络安全性配置文件。

使用示例

下面是一个完整的示例,展示了如何使用modern_player播放音频文件。

示例代码

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Player'),
      ),
      body: Center(
        child: SizedBox(
          height: 100,
          child: ModernPlayer.createPlayer(
            video: ModernPlayerVideo.single(
              ModernPlayerVideoData.network(
                label: "Sample Audio",
                url: "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
              ),
            ),
            options: ModernPlayerOptions(
              controlVisibiltyPlay: true,
              allowScreenSleep: false,
            ),
            controlsOptions: ModernPlayerControlsOptions(
              showControls: true,
              doubleTapToSeek: false,
              showMenu: false,
              showMute: true,
              showBackbutton: false,
              enableVolumeSlider: true,
              enableBrightnessSlider: false,
              showBottomBar: true,
            ),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用modern_player插件进行音频播放的一个简单示例。这个插件提供了灵活且强大的音频播放功能。

首先,确保你已经在pubspec.yaml文件中添加了modern_player依赖:

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

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

接下来,你可以在Flutter项目中使用ModernPlayer来进行音频播放。以下是一个基本的示例代码:

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

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

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

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

class _AudioPlayerScreenState extends State<AudioPlayerScreen> {
  ModernPlayer? _player;

  @override
  void initState() {
    super.initState();
    // 初始化ModernPlayer实例
    _player = ModernPlayer();

    // 监听播放状态变化
    _player!.playerStateStream.listen((state) {
      print("Player State: $state");
    });

    // 监听播放位置变化
    _player!.positionStream.listen((position) {
      print("Current Position: ${position.inMilliseconds}");
    });
  }

  @override
  void dispose() {
    // 释放资源
    _player?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Modern Player Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                // 加载音频文件
                final audioUrl = 'https://example.com/audiofile.mp3'; // 替换为你的音频URL
                await _player!.load(audioUrl);

                // 开始播放
                _player!.play();
              },
              child: Text('Play Audio'),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                // 暂停播放
                _player?.pause();
              },
              child: Text('Pause Audio'),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () async {
                // 停止播放并重置
                await _player?.stop();
                await _player?.reset();
              },
              child: Text('Stop and Reset'),
            ),
          ],
        ),
      ),
    );
  }
}

解释

  1. 依赖添加:在pubspec.yaml中添加modern_player依赖。
  2. 初始化ModernPlayer:在initState方法中初始化ModernPlayer实例,并监听播放状态变化和播放位置变化。
  3. 播放控制:使用按钮控制音频的播放、暂停和停止/重置。
  4. 资源释放:在dispose方法中释放ModernPlayer实例,以避免内存泄漏。

请确保替换示例中的音频URL为你自己的音频文件URL。这个示例展示了如何使用modern_player插件进行基本的音频播放控制。你可以根据需要进一步扩展功能,比如实现音量控制、进度条等。

回到顶部