How to play audio on the all platforms (including web) in Flutter

Question

The current audio plugins don't support the web. Assuming I have a local audio file or remote url, how would I play that on all platforms?

I found a solution using video_player so I am sharing this below as a self-answer Q&A.

Solution

Flutter's video_player plugin also supports audio, so you can use that. It currently supports Android, iOS, and the Web and will likely support other platforms as they become stable.

Here is the Video Player cookbook example adapted to play an audio file. I replaced the mp4 link with an mp3 link and removed the AspectRatio widget that the video needed. (Don't forget to add the video_player dependency to pubspec.yaml.)

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

void main() => runApp(VideoPlayerApp());

class VideoPlayerApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Player Demo',
      home: VideoPlayerScreen(),
    );
  }
}

class VideoPlayerScreen extends StatefulWidget {
  VideoPlayerScreen({Key key}) : super(key: key);

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

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    
    // Using an mp3 file instead of mp4.
    _controller = VideoPlayerController.network(
      'https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3',
    );

    _initializeVideoPlayerFuture = _controller.initialize();

    _controller.setLooping(true);

    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Butterfly Video'),
      ),
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            // not wrapped in an AspectRatio widget
            return VideoPlayer(_controller);
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              _controller.play();
            }
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

To support the web, you need to add the video_player_web dependency as well.

dependencies:
  video_player: ^0.10.4
  video_player_web:
    git:
      url: git://github.com/flutter/plugins.git
      path: packages/video_player/video_player_web

Note that this will not use git in the future. See the explanation here.

Update: Actually it worked on the web without specifying video_player_web.

Update 2: Read this article for a workaround for Web.

Update 3: just_audio is looking like a good solution.

Update 4: just_audio is a good solution. I'm using it on Android, iOS, web, and macOS.

Comments

[Christian]

The official position from the Flutter team seems to be that the VideoPlayer is not designed for playing audio: github.com/flutter/flutter/issues/38480 In particular it fails to play files from assets.

[princeoo7]

@Suragch I am facing only one problem, that to on ios, audio file plays without sound.

[Suragch]

@princeoo7, in my current project I switched to using the audioplayers plugin for Android and iOS.

[princeoo7]

@Suragch to play audio files from url, any working example that can you share ? I did tried that but failed to get it working when the audio is to be played from a url :(

[Suragch]

@princeoo7, I was having trouble with that, too, so I downloaded the file first and then played it as a local file.

[cmaxetom]

just_audio works fine for me. Since audioplayers package doesn't work for local assets for the web anymore, just_audio package is a good replacement.

[Suragch]

@cmaxetom, I've also switched to using just_audio. It's working well on Android, iOS, the web and macOS.