You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter如何播放asset目录音频文件 解决audioplayers导包报错

问题根源
  • 导包报错:audioplayers ^0.20.1 版本已将AudioCache类合并入主包package:audioplayers/audioplayers.dart,不再提供单独的audio_cache.dart导入入口,保留那行导入必然报错。
  • 原有逻辑缺陷:直接调用AudioPlayer的play方法传入字符串无法识别assets目录资源,且没有做播放状态管理,无法实现点击切换播放/停止的交互。
  • 配置错误:原pubspec.yaml使用//写注释不符合YAML语法规范,也没有声明mp3文件对应的assets资源路径,构建时不会把音频文件打包进安装包。
正确实现步骤

1. 修正pubspec.yaml配置

YAML对缩进要求严格,注释需使用#,同时要正确声明音频资源路径,参考配置如下:

dependencies:
  flutter:
    sdk: flutter
  audioplayers: ^0.20.1 # 注意缩进层级和注释写法

flutter:
  assets:
    # 替换成你项目中mp3的实际存放路径,比如文件直接放在assets根目录就写assets/mp3file.mp3
    - assets/audio/mecca_adhan.mp3

配置完成后执行flutter pub get拉取依赖,如果之前有构建缓存可以先跑flutter clean再重新编译。

2. 修正业务代码

删除报错的单独导包语句,增加播放状态标记,实现点击切换播放/停止逻辑,完整可运行代码如下:

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

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

  @override
  State<SelectAzanClass> createState() => _SelectAzanClassState();
}

class _SelectAzanClassState extends State<SelectAzanClass> {
  final AudioPlayer player = AudioPlayer();
  final AudioCache cache = AudioCache();
  // 播放状态标记,默认未播放
  bool isPlaying = false;

  @override
  void dispose() {
    // 页面销毁时释放播放器资源,避免内存泄漏和后台播放异常
    player.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () async {
        if (isPlaying) {
          // 正在播放状态点击则停止音频
          await player.stop();
          setState(() {
            isPlaying = false;
          });
        } else {
          // 未播放状态点击则加载assets音频播放
          // 注意这里传入的路径是去掉assets/前缀的相对路径,和pubspec中配置的资源路径对应
          // 比如pubspec配的是assets/audio/mecca_adhan.mp3,这里就传'audio/mecca_adhan.mp3'
          await cache.play('audio/mecca_adhan.mp3');
          setState(() {
            isPlaying = true;
          });
          // 监听音频自然播放完成事件,自动重置按钮状态
          player.onPlayerCompletion.listen((event) {
            if (mounted) {
              setState(() {
                isPlaying = false;
              });
            }
          });
        }
      },
      child: FittedBox(
        fit: BoxFit.scaleDown,
        child: Text(
          isPlaying ? "停止播放 Mecca Adhan" : "播放 Mecca Adhan",
          style: const TextStyle(
            // 如果你项目中没有定义customFontFamily常量,直接删除fontFamily这行配置即可
            // fontFamily: customFontFamily,
            fontWeight: FontWeight.bold,
            fontSize: 16,
          ),
        ),
      ),
    );
  }
}
注意事项
  • 安卓平台部分定制系统需要手动给应用开启媒体权限才能正常播放音频,若出现无声音问题先检查权限配置。
  • cache.play方法会自动将assets下的音频文件加载到临时目录,无需手动处理文件路径转换,适配你当前使用的^0.20.1版本。
  • 如果后续升级audioplayers到1.0及以上版本,API命名和资源加载逻辑会有调整,当前方案不兼容高版本。

内容的提问来源于stack exchange,提问作者Muhammad Hassan Saleem

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.03 08:57:18