首页 > 解决方案 > 如何在 Flutter 中的所有平台(包括 Web)上播放音频

问题描述

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

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

标签: flutteraudioflutter-web

解决方案


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 的解决方法。

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

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


推荐阅读