Flutter 如何在所有平台（包括 Web）上播放音频

Question

在当前的音频插件不支持网络。假设我有一个本地音频文件或远程 url，我将如何在所有平台上播放？

我找到了一个使用video_player的解决方案，所以我在下面分享这个作为自我回答的问答。

Answer 1

Flutter 的video_player插件也支持音频，所以你可以使用它。它目前支持 Android、iOS 和 Web，并且可能会在其他平台稳定后支持它们。

这是适用于播放音频文件的视频播放器食谱示例。我用 mp3 链接替换了 mp4 链接，并删除了视频所需的 AspectRatio 小部件。（不要忘记将video_player依赖项添加到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,
        ),
      ),
    );
  }
}

为了支持网络，您还需要添加video_player_web依赖项。

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

请注意，这将来不会使用 git。请参阅此处的说明。

更新：实际上它在没有指定video_player_web.

更新 2：阅读本文以了解 Web 的变通方法。

更新 3：just_audio看起来是一个不错的解决方案。

更新 4：just_audio 是一个很好的解决方案。我在 Android、iOS、Web 和 macOS 上使用它。