Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 458
Suragch Avatar asked Dec 27 '19 10:12

Suragch


People also ask

How do I get all the audio files in flutter?

To list and view Audio Files files from internal/external storage, you have to use flutter_file_manager, path, and path_provider_ex flutter package. Add the following lines in your pubspec. yaml file to add this package in your dependency. Add read / write permissions in your android/app/src/main/AndroidManifest.


1 Answers

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.

like image 86
Suragch Avatar answered Oct 03 '22 08:10

Suragch