Can't play audio on web. throws 'Failed to load because no supported source was found.'

[krishnaprasadgandrath-nooor]

Checklist

• I read the troubleshooting guide before raising this issue
• I made sure that the issue I am raising doesn't already exist

Current bug behaviour

I am trying to play audio on web platofrm using online url. but the audio player throws error stating not supported source.

Expected behaviour

No response

Steps to reproduce

1. Run flutter project in web platform
2. Play the audio by below methods :
   AudioPlayer().play(UrlResource(url));

Code sample

Code sample

import 'package:audioplayers/audioplayers.dart';
import 'package:components_demo/utils/default_appbar.dart';
import 'package:flutter/material.dart';

class AudioPlayerDemo extends StatefulWidget {
  const AudioPlayerDemo({super.key});

  @override
  State<AudioPlayerDemo> createState() => _AudioPlayerDemoState();
}

class _AudioPlayerDemoState extends State<AudioPlayerDemo> {
  TextEditingController audioUrlController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: DefaultAppBar.appBar(context, "AudioPlayerDemo"),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(child: TextFormField(controller: audioUrlController)),
                MaterialButton(
                  onPressed: playFromUrl,
                  child: const Text("Play"),
                )
              ],
            ),
          )
        ],
      ),
    );
  }

  void playFromUrl() {
    String url = audioUrlController.text;
    if (url.isEmpty) return;
    Source source = url.startsWith('http') ? UrlSource(url) : DeviceFileSource(url);
    try {
      // AudioPlayer player = AudioPlayer();
      // player.setSource();

      AudioPlayer().play(source);
    } catch (e) {
      print("Errot while playing");
    }
  }
}

Affected platforms

web

Platform details

No response

AudioPlayers Version

3.0.1

Build mode

debug

Audio Files/URLs/Sources

https://file-examples.com/storage/fe1aa0c9d563ea1e4a1fd34/2017/11/file_example_MP3_700KB.mp3

Screenshots

No response

Logs

Error: NotSupportedError: Failed to load because no supported source was found.
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 299:10  createErrorWithStack
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 341:28            _throw
dart-sdk/lib/core/errors.dart 116:5                                           throwWithStackTrace
dart-sdk/lib/async/zone.dart 1378:11                                          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>
Application finished.

Related issues / more information

No response

Working on PR

no way

[Gustl22]

The link to the audio file is broken. Can you upload it here, e.g. via .zip?
Are you sure your browser can play that file? Sometimes the file extension doesn't match the actual file content. See here to check.

[RedHappyLlama]

Hi,

I have a very similar issue, the error message I get is subtly different:

Error: NotSupportedError: The element has no supported sources.
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 299:10  createErrorWithStack
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 341:28            _throw
dart-sdk/lib/core/errors.dart 116:5                                           throwWithStackTrace
dart-sdk/lib/async/zone.dart 1378:11                                          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>

I have also tried the same audio file using the latest Example App. The audio still does not play but a similar but subtly different error message is recieved:

Error: NotSupportedError: Failed to load because no supported source was found.
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 299:10  createErrorWithStack
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 341:28            _throw
dart-sdk/lib/core/errors.dart 116:5                                           throwWithStackTrace
dart-sdk/lib/async/zone.dart 1378:11                                          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>

The odd thing is that this error is coming from a live production web app that has not changed for a number of months. Neither has the source audio.
The first report of this issue was 10/03/23. I can not be sure when it was most recently used without an error. However it was accessed 25/02/23 and no issue was reported.
Web browsers can play the URL the web-app is trying to play.
The audio that is attempted to be played is stored on AWS S3 Bucket. @krishnaprasadgandrath-nooor, by chance is this the same for you?

I have tested the web-app on the following platforms and get the same issue:

• iOS Chrome
• iOS Safari
• Android Chrome

[nitroplr]

Hi,

I have a very similar issue, the error message I get is subtly different:

Error: NotSupportedError: The element has no supported sources.
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 299:10  createErrorWithStack
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 341:28            _throw
dart-sdk/lib/core/errors.dart 116:5                                           throwWithStackTrace
dart-sdk/lib/async/zone.dart 1378:11                                          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>

I have also tried the same audio file using the latest Example App. The audio still does not play but a similar but subtly different error message is recieved:

Error: NotSupportedError: Failed to load because no supported source was found.
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 299:10  createErrorWithStack
dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 341:28            _throw
dart-sdk/lib/core/errors.dart 116:5                                           throwWithStackTrace
dart-sdk/lib/async/zone.dart 1378:11                                          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>

The odd thing is that this error is coming from a live production web app that has not changed for a number of months. Neither has the source audio. The first report of this issue was 10/03/23. I can not be sure when it was most recently used without an error. However it was accessed 25/02/23 and no issue was reported. Web browsers can play the URL the web-app is trying to play. The audio that is attempted to be played is stored on AWS S3 Bucket. @krishnaprasadgandrath-nooor, by chance is this the same for you?

I have tested the web-app on the following platforms and get the same issue:

• iOS Chrome
• iOS Safari
• Android Chrome

I have the same issue using this plugin for the first time with all packages up to date as well as Flutter up to date.

[Gustl22]

@krishnaprasadgandrath-nooor @RedHappyLlama @nitroplr we need the file in order to test your case. Can you upload it here wrapped in a zip file plz? Thx. Otherwise we cannot help :)

[nitroplr]

The project was too big to share as a zip but if you try running this project on web it will throw an error. After a lot of playing with this package and other audio packages I'm not sure it's even possible to play from assets on web.

https://github.com/nitroplr/audioplayers_web_bug

Error: NotSupportedError: Failed to load because no supported source was found.
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 299:10  createErrorWithStack
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 355:28            _throw
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/core/errors.dart 120:5                                           throwWithStackTrace
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1385:11                                          callback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/schedule_microtask.dart 40:11                              _microtaskLoop
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/schedule_microtask.dart 49:5                               _startMicrotaskLoop
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15           <fn>

[Gustl22]

@nitroplr Sure, it is possible, just try our example.

Edit: note that the default path in AudioCache already includes the assets/ prefix, which you don't need to include in your path:
https://github.com/nitroplr/audioplayers_web_bug/blob/1e7cfe54161e0a0ab4c326a01f4cb1fea854059b/lib/play_sounds.dart#L6

You also need a file type which is supported by your browser:
https://github.com/bluefireteam/audioplayers/blob/main/troubleshooting.md#supported-formats--encodings

Your provided file seems to be supported:

<html>
    <audio
        controls
        src="https://github.com/nitroplr/audioplayers_web_bug/raw/master/assets/audio/cha_ching.mp3">
    </audio>
</html>

I can also play your file in our example, when including it as asset and use its asset path in the code :)

[Gustl22]

Closing in favor of #1494