Flutter音频播放之just_audio

简介: Flutter音频播放之just_audio

just_audio的使用

just_audio,它是一个用于播放音频的 Flutter 插件。

安装和导入 just_audio

要使用 just_audio 库,需要将其添加到项目的 pubspec.yaml 文件中

dependencies:
   just_audio: ^0.9.34

然后运行以下命令以安装该库:

flutter pub get

要使用 just_audio,需要在代码中导入它:

import 'package:just_audio/just_audio.dart';

播放本地音频文件

要播放本地音频文件,需要创建 AudioPlayer 对象并调用 setFilePath 方法将音频文件的路径传递给它。

以下是一个简单的示例代码,演示了如何使用 just_audio 播放本地音频文件

import 'package:flutter/material.dart';
import 'package:just_audio/just_audio.dart';
class AudioPlayerPage extends StatefulWidget {
  @override
  _AudioPlayerPageState createState() => _AudioPlayerPageState();
}
class _AudioPlayerPageState extends State<AudioPlayerPage> {
  final _player = AudioPlayer();
  @override
  void initState() {
    super.initState();
    _player.setFilePath('assets/audio/sample.mp3');
  }
  @override
  void dispose() {
    _player.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Player'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              icon: Icon(Icons.play_arrow),
              onPressed: () {
                _player.play();
              },
            ),
            SizedBox(height: 20),
            IconButton(
              icon: Icon(Icons.pause),
              onPressed: () {
                _player.pause();
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中,我们创建了一个 AudioPlayer 对象 _player,并在 initState 方法中调用了 setFilePath 方法,将本地音频文件的路径传递给它。在 build 方法中,我们创建了两个按钮,一个用于播放音频,另一个用于暂停音频。当用户按下播放按钮时,我们调用 _player.play() 方法来播放音频。当用户按下暂停按钮时,我们调用 _player.pause() 方法来暂停音频。


在 dispose 方法中,我们调用 _player.dispose() 方法来释放所有资源。


播放网络音频文件

要播放网络音频文件,需要调用 setUrl 方法将音频文件的 URL 传递给 AudioPlayer 对象。以下是一个简单的示例代码,演示了如何使用 just_audio 播放网络音频文件:

import 'package:flutter/material.dart';
import 'package:just_audio/just_audio.dart';
class AudioPlayerPage extends StatefulWidget {
  @override
  _AudioPlayerPageState createState() => _AudioPlayerPageState();
}
class _AudioPlayerPageState extends State<AudioPlayerPage> {
  final _player = AudioPlayer();
  final _url = 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3';
  @override
  void initState() {
    super.initState();
    _player.setUrl(_url);
  }
  @override
  void dispose() {
    _player.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Player'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              icon: Icon(Icons.play_arrow),
              onPressed: () {
                _player.play();
              },
            ),
            SizedBox(height: 20),
            IconButton(
              icon: Icon(Icons.pause),
              onPressed: () {
                _player.pause();
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中,我们创建了一个 AudioPlayer 对象 _player,并在 initState 方法中调用了 setUrl 方法,将网络音频文件的 URL 传递给它。在 build 方法中,我们创建了两个按钮,一个用于播放音频,另一个用于暂停音频。当用户按下播放按钮时,我们调用 _player.play() 方法来播放音频。当用户按下暂停按钮时,我们调用 _player.pause() 方法来暂停音频。


在 dispose 方法中,我们调用 _player.dispose() 方法来释放所有资源。


播放音频流

要播放音频流,需要创建一个 AudioPlayer 对象,并调用 setAudioSource 方法来设置音频源。setAudioSource 方法可以接收多种参数类型,包括本地文件路径、网络 URL、DASH/HLS URL、以及自定义的 AudioSource 对象。以下是一个简单的示例代码,演示了如何使用 just_audio 播放音频流:

import'package:flutter/material.dart';
import 'package:just_audio/just_audio.dart';
class AudioPlayerPage extends StatefulWidget {
  @override
  _AudioPlayerPageState createState() => _AudioPlayerPageState();
}
class _AudioPlayerPageState extends State<AudioPlayerPage> {
  final _player = AudioPlayer();
  final _url = 'https://stream.radio.co/sb8ebfa4b0/listen';
  @override
  void initState() {
    super.initState();
    _player.setAudioSource(AudioSource.uri(Uri.parse(_url)));
  }
  @override
  void dispose() {
    _player.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Player'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              icon: Icon(Icons.play_arrow),
              onPressed: () {
                _player.play();
              },
            ),
            SizedBox(height: 20),
            IconButton(
              icon: Icon(Icons.pause),
              onPressed: () {
                _player.pause();
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中,我们创建了一个 AudioPlayer 对象 _player,并在 initState 方法中调用了 setAudioSource 方法,将音频流的 URL 传递给它。在 build 方法中,我们创建了两个按钮,一个用于播放音频,另一个用于暂停音频。当用户按下播放按钮时,我们调用 _player.play() 方法来播放音频。当用户按下暂停按钮时,我们调用 _player.pause() 方法来暂停音频。


在 dispose 方法中,我们调用 _player.dispose() 方法来释放所有资源。


播放音频列表

要播放音频列表,需要创建一个包含多个音频源的 ConcatenatingAudioSource 对象,并将其传递给 AudioPlayer 对象的 setAudioSource 方法。以下是一个简单的示例代码,演示了如何使用 just_audio 播放音频列表:

import 'package:flutter/material.dart';
import 'package:just_audio/just_audio.dart';
class AudioPlayerPage extends StatefulWidget {
  @override
  _AudioPlayerPageState createState() => _AudioPlayerPageState();
}
class _AudioPlayerPageState extends State<AudioPlayerPage> {
  final _player = AudioPlayer();
  final _playlist = ConcatenatingAudioSource(children: [
    AudioSource.uri(Uri.parse('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')),
    AudioSource.uri(Uri.parse('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3')),
    AudioSource.uri(Uri.parse('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3')),
  ]);
  @override
  void initState() {
    super.initState();
    _player.setAudioSource(_playlist);
  }
  @override
  void dispose() {
    _player.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Player'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            IconButton(
              icon: Icon(Icons.play_arrow),
              onPressed: () {
                _player.play();
              },
            ),
            SizedBox(height: 20),
            IconButton(
              icon: Icon(Icons.pause),
              onPressed: () {
                _player.pause();
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中,我们创建了一个 AudioPlayer 对象 _player,并创建了一个包含三个音频源的 ConcatenatingAudioSource 对象 _playlist。在 initState 方法中,我们调用了 _player.setAudioSource(_playlist) 方法,将音频列表传递给 _player 对象。在 build 方法中,我们创建了两个按钮,一个用于播放音频列表,另一个用于暂停音频列表。当用户按下播放按钮时,我们调用 _player.play() 方法来播放音频列表。当用户按下暂停按钮时,我们调用 _player.pause() 方法来暂停音频列表。


在 dispose 方法中,我们调用 _player.dispose() 方法来释放所有资源。


相关文章
|
缓存 Linux Android开发
Flutter音乐播放audioplayers
Flutter音乐播放audioplayers
|
编解码 Dart 网络协议
Flutter如何玩转超低延迟RTSP/RTMP播放,跨平台视频流体验大升级,让你的应用秒变直播神器!
【9月更文挑战第3天】Flutter作为谷歌推出的跨平台移动UI框架,凭借高性能和丰富的生态系统广受好评。本文详细介绍如何在Flutter应用中实现低延迟的跨平台RTSP/RTMP播放,并提供具体示例代码。首先介绍了如何使用`flutter_vlc_player`播放RTSP流,然后讨论了优化视频播放以降低延迟的方法,包括调整播放器配置等。通过选用合适的播放器插件并进行优化,Flutter可在视频流播放领域提供卓越的用户体验。随着生态的发展,Flutter有望成为视频流媒体开发的首选框架。
1346 6
|
编解码 Dart 网络协议
"震撼揭秘!Flutter如何玩转超低延迟RTSP/RTMP播放,跨平台视频流体验大升级,让你的应用秒变直播神器!"
【8月更文挑战第15天】Flutter作为跨平台UI框架,以其高效性和丰富生态著称。本文详述如何利用flutter_vlc_player等插件在Flutter中实现低延迟RTSP/RTMP播放,并提供代码示例。通过优化播放器设置,如禁用缓冲、启用帧丢弃等,可进一步减少延迟,提升用户观看体验,展现了Flutter在视频流媒体应用中的强大潜力。
433 0
|
编解码 开发工具 Android开发
Flutter下实现低延迟的跨平台RTSP/RTMP播放
为什么要用Flutter? Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
615 0
Flutter的AspectRatio控件实现视频播放、图片播放按照长宽比缩放
Flutter的AspectRatio控件实现视频播放、图片播放按照长宽比缩放
|
网络协议 开发工具 Android开发
Flutter下实现低延迟的跨平台RTSP/RTMP播放
为什么要用Flutter? Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
5200 0
|
9月前
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
116 1
|
8月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
411 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
9月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
293 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
8月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
469 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

热门文章

最新文章

  • 1
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    225
  • 2
    通过外部链接启动 Flutter App(详细介绍及示例)
    295
  • 3
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    854
  • 4
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    471
  • 5
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    277
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    411
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    200
  • 8
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    216
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    469
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    249