如何在 Flutter Web 上播放本地 mp3？答案

【问题标题】：How can I play local mp3 on flutter web?如何在 Flutter Web 上播放本地 mp3？
【发布时间】：2021-04-12 20:54:43
【问题描述】：

我尝试了很多包，但没有人可以从本地文件播放 mp3 文件...

用户可以从系统中选择文件

_myFile = await FilePickerCross.importFromStorage(
      type: FileTypeCross.audio,  
);

那么，如何在flutter网页上播放呢？

通常会崩溃：

Error: NotSupportedError: Failed to load because no supported source was found.
    at Object.createErrorWithStack (http://localhost:62567/dart_sdk.js:4352:12)
    at Object._rethrow (http://localhost:62567/dart_sdk.js:38191:16)
    at async._AsyncCallbackEntry.new.callback (http://localhost:62567/dart_sdk.js:38185:13)
    at Object._microtaskLoop (http://localhost:62567/dart_sdk.js:38017:13)
    at _startMicrotaskLoop (http://localhost:62567/dart_sdk.js:38023:13)
    at http://localhost:62567/dart_sdk.js:33520:9

喜欢这个https://github.com/florent37/Flutter-AssetsAudioPlayer/issues/383

那么有什么方法可以在 Flutter Web 上播放本地 mp3 文件吗？

【问题讨论】：

标签： flutter flutter-web

【解决方案1】：

您可以使用audioplayers 包。

从本地文件播放音频：

AudioPlayer audioPlayer = AudioPlayer();      
playLocal() async {
  int result = await audioPlayer.play(localPath, isLocal: true);
}

有关详细信息，请查看包文档：

https://pub.dev/packages/audioplayers

【讨论】：

@pskink 我认为这个包应该可以工作pub.dev/packages/assets_audio_player
但这acualy显示“错误：NotSupportedError：加载失败，因为找不到支持的源。” （我看到localPath是“C：/fakepath/210107-121628165221_1.wav”使用macos）
assets_audio_player 也无法播放。我认为任何包都会失败，因为这可能是一个颤抖的问题
@capdev 我认为你应该在 GitHub 上提出问题
这是因为你根本无法从 Flutter Web 访问任何本地文件

【解决方案2】：

您可以在下面复制粘贴运行完整代码
以下演示代码已在 Flutter Web 上进行了很好的测试
您可以使用包https://pub.dev/packages/soundpool 并致电_soundpool.loadAndPlayUint8List(_myFile.toUint8List());
代码sn-p

Soundpool _soundpool;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  _soundpool = Soundpool();
  
...
FilePickerCross _myFile = await FilePickerCross.importFromStorage(
      type: FileTypeCross.audio,
    );

_soundpool.loadAndPlayUint8List(_myFile.toUint8List());

完整代码

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:file_picker_cross/file_picker_cross.dart';
import 'package:soundpool/soundpool.dart';

Soundpool _soundpool;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  _soundpool = Soundpool();
  runApp(MyApp());
}

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() async {
    FilePickerCross _myFile = await FilePickerCross.importFromStorage(
      type: FileTypeCross.audio,
    );

    _soundpool.loadAndPlayUint8List(_myFile.toUint8List());

    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

【讨论】：