Playing audio with audioplayers package from local in flutter web throws `UnimplementedError`

Question

I am using audioplayers: ^4.0.1 to play audio from the local and url in my flutter application. To pick the file from local I am using the file_picker: ^5.2.10. To play the audio from local I am using the BytesSource(). Its working fine in the android but throw the below error in web. What I am doing wrong?

Error:

Error: UnimplementedError
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49  throw_
packages/audioplayers_web/audioplayers_web.dart 118:5                         setSourceBytes
packages/audioplayers/src/audioplayer.dart 318:22                             setSourceBytes
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50            <fn>
dart-sdk/lib/async/zone.dart 1653:54                                          runUnary
dart-sdk/lib/async/future_impl.dart 147:18                                    handleValue
dart-sdk/lib/async/future_impl.dart 766:44                                    handleValueCallback
dart-sdk/lib/async/future_impl.dart 795:13                                    _propagateToListeners
dart-sdk/lib/async/future_impl.dart 430:9                                     callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                              _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                               _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15           <fn>

Code:

Future<void> updatingAudio() async {
    audioFile = await FilePicker.platform.pickFiles(
      withData: true,
      type: FileType.audio,
      allowCompression: true,
    );
    if (audioFile != null) {
      audioPlayer.setSource(BytesSource(audioFile!.files.first.bytes!));
    }
    update();
  }

Answer 1

This one worked perfectly fine with playing the audio from the local storage in the web. By using the just_audio package.

Custom Class:

import 'package:just_audio/just_audio.dart';

class MyCustomSource extends StreamAudioSource {
  final List<int> bytes;
  final String type;
  MyCustomSource({required this.bytes, required this.type});

  @override
  Future<StreamAudioResponse> request([int? start, int? end]) async {
    start ??= 0;
    end ??= bytes.length;
    return StreamAudioResponse(
      sourceLength: bytes.length,
      contentLength: end - start,
      offset: start,
      stream: Stream.value(bytes.sublist(start, end)),
      contentType: type,
    );
  }
}

Picking Local File

Future<void> selectingAudio() async {
    audioFile = await FilePicker.platform.pickFiles(
      withData: true,
      type: FileType.audio,
      allowCompression: true,
    );
    if (audioFile != null) {
      try {
        String mimetype = "audio/";
        if (audioFile!.files.first.extension != null) {
          mimetype = mimetype + audioFile!.files.first.extension!;
        } else {
          mimetype = "${mimetype}mp3";
        }
        await audioPlayer
            .setAudioSource(MyCustomSource(bytes: audioFile!.files.first.bytes as List<int>, type: mimetype));
        await audioPlayer.load();
        Duration? duration = await audioPlayer.durationFuture;
        duration ??= Duration.zero;
        if (isPlaying) {
          audioPlayer.stop();
          isPlaying = false;
        }
        audioStartTime = "00:00";
        audioEndTime =
            "${duration.inMinutes.remainder(60).toString().padLeft(2, "0")}:${duration.inSeconds.remainder(60).toString().padLeft(2, "0")}";
      } catch (exception, stacktree) {
        debugPrint("$exception");
        debugPrint("$stacktree");
      }
    }
  }

Answer 2

As commented by Wh1t3rabbit setSourceBytes is not implemented on multiple platforms. A work around for web was posted in this thread: https://github.com/bluefireteam/audioplayers/issues/1269#issuecomment-1434089114

Example:

UrlSource urlSourceFromBytes(Uint8List bytes,{String mimeType= "audio/mpeg"}) {
  return  UrlSource(Uri.dataFromBytes(bytes, mimeType: mimeType).toString());
}
Future<void> updatingAudio() async {
    audioFile = await FilePicker.platform.pickFiles(
      withData: true,
      type: FileType.audio,
      allowCompression: true,
    );
    if (audioFile != null) {
      audioPlayer.setSource(urlSourceFromBytes(audioFile!.files.first.bytes!));
    }
   update();
}