如何在 Flutter 应用中播放 .mp3 文件？答案

【问题标题】：How to playback an .mp3 file in a Flutter app?如何在 Flutter 应用中播放 .mp3 文件？
【发布时间】：2017-04-23 06:05:26
【问题描述】：

我编写了一个 Dart 网络应用程序，它从服务器检索 .mp3 文件并播放它们；我正在尝试使用 Flutter 编写移动版本。我知道dart:web_audio 是 Web 应用程序的主要选项，但 Flutter 在我的 SDK 中找不到它。我知道它在那里，因为我可以将以下内容编译为 Javascript：

import 'dart:html';
import 'dart:convert';
import 'dart:web_audio';
AudioContext audioContext;

main() async {
  audioContext = new AudioContext();
  var ul = (querySelector('#songs') as UListElement);
  var signal = await HttpRequest.getString('http://10.0.0.6:8000/api/filelist');
 //  Map json = JSON.decode(signal);
 //  for (Map file in json['songs']) {
   print("signal: $signal");
   Map json = JSON.decode(signal);
   for (Map file in json['songs']) {
     var li = new LIElement()
       ..appendText(file['title']);
     var button = new ButtonElement();
     button.setAttribute("id", "#${file['file']}");
     button.appendText("Play");

     li.append(button);
     new Song(button, file['file']);
     ul.append(li);

  }

}

class Song {
  ButtonElement button;
  bool _playing = false;
  // AudioContext _audioContext;
  AudioBufferSourceNode _source;
  String title;

  Song(this.button, this.title) {

    button..onClick.listen((e) => _toggle());
  }

  _toggle() {
    _playing = !_playing;
    _playing ? _start() : _stop();
  }

  _start() {
    return HttpRequest
         .request("http://10.0.0.6:8000/music/$title", responseType: "arraybuffer")
         .then((HttpRequest httpRequest) {
            return audioContext
              .decodeAudioData(httpRequest.response)
         .then((AudioBuffer buffer) {
              _source = audioContext.createBufferSource();
              _source.buffer = buffer;
              _source.connectNode(audioContext.destination);
              _source.start(0);
              button.text = "Stop";
              _source.onEnded.listen((e){
                 _playing = false;
                 button.text = "Play";
          });
       });
    });
  }

  _stop() {
     _source.stop(0);
     button.text = "Play";
  }
}

如何为 Flutter 应用重写我的代码中的 dart:web_audio 部分？ Flutter 可以访问 MediaPlayer 吗？如果是这样，我将如何在pubspec.yaml 中引用它？

【问题讨论】：

基本上，我有一个发送 .mp3 和 .wav 文件作为响应的服务。文件的名称在请求的 URL 中。我希望能够使用该服务并在 Flutter 应用程序中播放该音乐。这样的活动应该是什么样的？
通过flutter_sprites库有一个用于Flutter的音频播放组件。 Flutter_sprites 和音频组件都已从 Flutter 代码库中删除，请参阅https://github.com/flutter/flutter/issues/1364。您可以联系 Flutter 团队以查看声音/音频组件的状态。或者基于Flutter hello_service example创建你自己的集成Dart和Android/Java层的服务。
如何联系 Flutter 团队？
有一个Gitter chatroom，Flutter 团队非常乐于助人且响应迅速。还有一个Google group，但我个人更喜欢聊天。 Flutter 的@eric-seidel 已经在下面做出了回应。

标签： android audio dart flutter

【解决方案1】：

正如上面提到的 raju-bitter，Flutter 过去在其核心引擎中提供了一些内置的音频包装器，但这些已经被移除：https://github.com/flutter/flutter/issues/1364。

使用 Flutter 的应用程序只是 iOS 或 Android 应用程序，因此可以使用 hello_services 模型 (https://github.com/flutter/flutter/tree/master/examples/hello_services) 中的一些 Java 或 Obj-C 代码通过 Flutter 执行底层 iOS/Android 可以执行的任何操作。此模型记录在https://flutter.io/platform-services。它还没有我们希望的那么容易。许多改进即将推出。

【讨论】：

【解决方案2】：

我知道它晚了 4 年，但我找到了audioplayers 包，可以用作以下内容

import 'package:audioplayers/audio_cache.dart';
import 'package:audioplayers/audioplayers.dart';

//Call this function from an event
void playRemoteFile() {
    AudioPlayer player = new AudioPlayer();
    player.play("https://luan.xyz/files/audio/ambient_c_motion.mp3");
}

【讨论】：