Flutter音频缓存插件just_audio_cache的使用

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

Flutter音频缓存插件just_audio_cache的使用

just_audio_cache 是一个用于自动处理音频文件缓存的Flutter插件。它扩展了 just_audio 包的功能,使得音频文件可以被下载并存储在本地缓存中,从而提高播放效率。

如何使用

前提条件

确保已经在项目的依赖项中添加了 just_audio 包。

核心方法 dynamicSet

该方法会自动处理缓存。如果目标文件不在缓存中,则会下载并将其推入缓存。下次请求相同的URL时,将调用本地文件而不是重新请求。

参数说明

  • url: 音频源,即唯一标识存储文件路径的字符串。
  • pushIfNotExisted: 如果为true且文件不存在,则会下载文件并将其推入缓存。
  • excludeCallback: 一个回调函数,允许指定哪些文件不应被缓存。

示例代码

以下是一个完整的示例demo,展示了如何使用 just_audio_cache 插件来播放、缓存和管理音频文件:

import 'package:flutter/material.dart';
import 'package:just_audio/just_audio.dart';
import 'package:just_audio_cache/just_audio_cache.dart';

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

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

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late final AudioPlayer _player;
  final url = 'https://www.mboxdrive.com/m54.mp3';
  final sources = [
    'https://www.mboxdrive.com/m54.mp3',
    'https://www.mboxdrive.com/%c3%86STRAL%20-%20half%20light.mp3',
    'https://www.mboxdrive.com/%ca%8f%e1%b4%80%20%ca%99%e1%b4%9c%e1%b4%85%e1%b4%9c.mp3'
  ];
  PlayerState? _state;

  @override
  void initState() {
    _player = AudioPlayer();
    // 自动设置并缓存音频文件
    _player.dynamicSet(url: url);
    _player.playerStateStream.listen((state) {
      setState(() {
        _state = state;
      });
      print(state);
    });
    super.initState();
  }

  void _playAudio() async {
    await _player.play();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Just Audio Cache Demo')),
        body: Center(
          child: _audioStateWidget(),
        ),
      ),
    );
  }

  Widget _audioStateWidget() {
    if (_state == null) return _playButton;

    if (_state!.playing) {
      return _pauseButton;
    } else {
      return _playButton;
    }
  }

  Widget get _pauseButton => ElevatedButton(
        onPressed: () {
          _player.pause();
        },
        child: Text('Pause'),
      );

  Widget get _playButton => ElevatedButton(
        onPressed: () {
          _playAudio();
        },
        child: Text('Play'),
      );
}

其他功能

  • 检查文件是否存在于缓存中:
    bool exists = await _player.existedInLocal(url);
    
  • 手动添加文件到缓存:
    await _player.cacheFile(url);
    
  • 获取缓存中的文件:
    String cachedFilePath = await _player.getCachedFile(url: url);
    
  • 清除所有缓存:
    await _player.clear();
    

通过上述步骤,您可以轻松地在Flutter应用中实现音频文件的自动缓存与播放。


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

1 回复

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


当然,以下是一个关于如何使用 just_audio_cache 插件在 Flutter 中实现音频缓存的示例代码。这个插件允许你缓存音频文件,以便在没有网络连接时也能播放它们。

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

dependencies:
  flutter:
    sdk: flutter
  just_audio: ^0.10.0  # 请检查最新版本号
  just_audio_cache: ^0.1.2  # 请检查最新版本号

然后,运行 flutter pub get 来获取这些依赖。

接下来,在你的 Flutter 应用中使用 just_audio_cache 插件。以下是一个完整的示例代码:

import 'package:flutter/material.dart';
import 'package:just_audio/just_audio.dart';
import 'package:just_audio_cache/just_audio_cache.dart';

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

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

class AudioCacheDemo extends StatefulWidget {
  @override
  _AudioCacheDemoState createState() => _AudioCacheDemoState();
}

class _AudioCacheDemoState extends State<AudioCacheDemo> {
  late AudioCache _audioCache;
  late AudioPlayer _audioPlayer;

  @override
  void initState() {
    super.initState();
    _audioCache = AudioCache(
      baseUrl: 'https://example.com/audio/', // 替换为你的音频文件基础URL
      prefix: 'cache/', // 缓存文件的目录前缀
    );
    _audioPlayer = AudioPlayer();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Audio Cache Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            // 播放并缓存音频文件
            final url = 'my_audio_file.mp3'; // 替换为你的音频文件名
            await _audioCache.load(url);
            _audioCache.play(url).then((player) {
              setState(() {
                _audioPlayer = player;
              });
            });
          },
          child: Text('Play and Cache Audio'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 停止播放
          if (_audioPlayer.playing) {
            await _audioPlayer.pause();
          } else if (_audioPlayer.paused) {
            await _audioPlayer.play();
          } else {
            await _audioPlayer.seek(Duration.zero);
            await _audioPlayer.play();
          }
        },
        tooltip: 'Play/Pause Audio',
        child: Icon(
          _audioPlayer.playing ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }

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

代码解释:

  1. 依赖导入:首先,我们在 pubspec.yaml 文件中添加了 just_audiojust_audio_cache 依赖。

  2. 主应用:在 MyApp 类中,我们设置了应用的主题和主页。

  3. 音频缓存演示:在 AudioCacheDemo 类中,我们定义了 _audioCache_audioPlayer_audioCache 用于管理音频文件的缓存和播放,而 _audioPlayer 用于控制音频播放。

  4. 初始化:在 initState 方法中,我们初始化了 _audioCache_audioPlayer

  5. 界面布局:在 build 方法中,我们创建了一个 Scaffold,其中包含一个 ElevatedButton 用于加载和播放音频文件,以及一个 FloatingActionButton 用于播放/暂停音频。

  6. 播放音频:在按钮的 onPressed 方法中,我们使用 _audioCache.load(url) 方法加载并缓存音频文件,然后使用 _audioCache.play(url) 方法播放音频。

  7. 播放/暂停控制:在 FloatingActionButtononPressed 方法中,我们根据当前音频的播放状态来控制播放或暂停。

  8. 资源释放:在 dispose 方法中,我们释放了 _audioPlayer 的资源。

这个示例代码展示了如何使用 just_audio_cache 插件在 Flutter 应用中实现音频文件的缓存和播放。你可以根据自己的需求进一步定制和扩展这个示例。

回到顶部