5

サーバーから .mp3 ファイルを取得して再生するDart Webアプリを作成しました。Flutter を使用してモバイル版を作成しようとしています。がウェブ アプリの主なオプションであることはわかっdart:web_audioていますが、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";
  }
} 

dart:web_audioFlutter アプリのコードの一部をどのように書き直しますか? Flutter は MediaPlayer にアクセスできますか? もしそうなら、私はそれをどのように参照しpubspec.yamlますか?

4

2 に答える 2