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.

Answer 1

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.