Flutter의 오디오 플레이어(Audio Player) 사용법

오디오 플레이어는 Flutter 애플리케이션에서 오디오 파일을 재생할 수 있게 해주는 유용한 도구입니다. 이를 통해 사용자는 로컬 파일이나 네트워크 상의 오디오 파일을 재생할 수 있습니다. 이번 글에서는 Flutter에서 오디오 플레이어를 사용하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. 오디오 플레이어 패키지 설치

Flutter 애플리케이션에서 오디오 플레이어를 사용하기 위해 audioplayers 패키지를 설치합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  audioplayers: ^0.20.1

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. 오디오 플레이어 초기화

오디오 플레이어를 사용하려면 AudioPlayer 객체를 초기화해야 합니다. 다음은 오디오 플레이어를 초기화하고 오디오를 재생하는 예제입니다.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AudioPlayerExample(),
    );
  }
}

class AudioPlayerExample extends StatefulWidget {
  @override
  _AudioPlayerExampleState createState() => _AudioPlayerExampleState();
}

class _AudioPlayerExampleState extends State<AudioPlayerExample> {
  AudioPlayer _audioPlayer = AudioPlayer();
  bool isPlaying = false;

  void _playPause() async {
    if (isPlaying) {
      await _audioPlayer.pause();
    } else {
      await _audioPlayer.play('https://www.example.com/sample_audio.mp3');
    }
    setState(() {
      isPlaying = !isPlaying;
    });
  }

  void _stop() async {
    await _audioPlayer.stop();
    setState(() {
      isPlaying = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Audio Player Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            IconButton(
              icon: Icon(isPlaying ? Icons.pause : Icons.play_arrow),
              iconSize: 64.0,
              onPressed: _playPause,
            ),
            SizedBox(height: 20),
            IconButton(
              icon: Icon(Icons.stop),
              iconSize: 64.0,
              onPressed: _stop,
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 AudioPlayer를 사용하여 네트워크 오디오 파일을 재생하는 예제입니다. 사용자가 재생 버튼을 클릭하면 오디오가 재생되고, 일시 정지 버튼을 클릭하면 오디오가 일시 정지됩니다. 정지 버튼을 클릭하면 오디오가 정지됩니다.

3. 로컬 오디오 파일 재생

로컬 오디오 파일을 재생하려면 AudioPlayer 객체의 play 메서드를 사용하여 파일 경로를 전달합니다. 다음은 로컬 오디오 파일을 재생하는 예제입니다.

 

import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LocalAudioPlayerExample(),
    );
  }
}

class LocalAudioPlayerExample extends StatefulWidget {
  @override
  _LocalAudioPlayerExampleState createState() => _LocalAudioPlayerExampleState();
}

class _LocalAudioPlayerExampleState extends State<LocalAudioPlayerExample> {
  AudioPlayer _audioPlayer = AudioPlayer();
  bool isPlaying = false;

  Future<String> _getFilePath() async {
    final directory = await getApplicationDocumentsDirectory();
    return '${directory.path}/sample_audio.mp3';
  }

  void _playPause() async {
    if (isPlaying) {
      await _audioPlayer.pause();
    } else {
      final filePath = await _getFilePath();
      await _audioPlayer.play(filePath, isLocal: true);
    }
    setState(() {
      isPlaying = !isPlaying;
    });
  }

  void _stop() async {
    await _audioPlayer.stop();
    setState(() {
      isPlaying = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Local Audio Player Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            IconButton(
              icon: Icon(isPlaying ? Icons.pause : Icons.play_arrow),
              iconSize: 64.0,
              onPressed: _playPause,
            ),
            SizedBox(height: 20),
            IconButton(
              icon: Icon(Icons.stop),
              iconSize: 64.0,
              onPressed: _stop,
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 로컬 오디오 파일을 재생하는 예제입니다. getApplicationDocumentsDirectory 메서드를 사용하여 로컬 디렉토리 경로를 얻고, 해당 경로에 있는 오디오 파일을 재생합니다.

 

 

 

반응형

 

 

 

4. 오디오 컨트롤 추가

오디오 플레이어에 재생, 일시 정지, 정지 등의 컨트롤을 추가할 수 있습니다. 다음은 오디오 컨트롤을 추가하는 예제입니다.

 

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AudioPlayerWithControls(),
    );
  }
}

class AudioPlayerWithControls extends StatefulWidget {
  @override
  _AudioPlayerWithControlsState createState() => _AudioPlayerWithControlsState();
}

class _AudioPlayerWithControlsState extends State<AudioPlayerWithControls> {
  AudioPlayer _audioPlayer = AudioPlayer();
  bool isPlaying = false;
  Duration _duration = Duration();
  Duration _position = Duration();

  @override
  void initState() {
    super.initState();
    _audioPlayer.onDurationChanged.listen((Duration d) {
      setState(() {
        _duration = d;
      });
    });

    _audioPlayer.onAudioPositionChanged.listen((Duration p) {
      setState(() {
        _position = p;
      });
    });
  }

  void _playPause() async {
    if (isPlaying) {
      await _audioPlayer.pause();
    } else {
      await _audioPlayer.play('https://www.example.com/sample_audio.mp3');
    }
    setState(() {
      isPlaying = !isPlaying;
    });
  }

  void _stop() async {
    await _audioPlayer.stop();
    setState(() {
      isPlaying = false;
      _position = Duration();
    });
  }

  void _seekToSecond(int second) {
    Duration newDuration = Duration(seconds: second);
    _audioPlayer.seek(newDuration);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Audio Player with Controls')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Slider(
              value: _position.inSeconds.toDouble(),
              min: 0.0,
              max: _duration.inSeconds.toDouble(),
              onChanged: (double value) {
                setState(() {
                  _seekToSecond(value.toInt());
                  value = value;
                });
              },
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.replay_10),
                  onPressed: () {
                    _seekToSecond((_position.inSeconds - 10).clamp(0, _duration.inSeconds));
                  },
                ),
                IconButton(
                  icon: Icon(isPlaying ? Icons.pause : Icons.play_arrow),
                  onPressed: _playPause,
                ),
                IconButton(
                  icon: Icon(Icons.stop),
                  onPressed: _stop,
                ),
                IconButton(
                  icon: Icon(Icons.forward_10),
                  onPressed: () {
                    _seekToSecond((_position.inSeconds + 10).clamp(0, _duration.inSeconds));
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 오디오 플레이어에 재생, 일시 정지, 정지, 앞뒤로 10초 이동 등의 컨트롤을 추가하는 예제입니다. Slider를 사용하여 오디오 진행 상태를 표시하고, IconButton을 사용하여 다양한 컨트롤을 구현합니다.

결론

Flutter 애플리케이션에서 오디오 플레이어를 사용하면 로컬 파일이나 네트워크 상의 오디오 파일을 재생할 수 있습니다. audioplayers 패키지를 사용하여 오디오를 재생하고, 다양한 컨트롤을 추가하는 방법을 통해 오디오 플레이어 기능을 구현할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 오디오 플레이어를 효율적으로 사용해보세요. 오디오 플레이어를 통해 애플리케이션의 기능을 확장하고, 사용자 경험을 향상시킬 수 있습니다.