🫵

【FLutter】 音が鳴るボタンを作る

2024/01/30に公開

最近考えている個人アプリの案で音が出るボタンを搭載したいなと思い、良さげなパッケージがあったので試してみました。

記事の目的

ボタンを押したら音が鳴るだけのサウンドボタンを作る。

パッケージ 【audioplayers】

https://pub.dev/packages/audioplayers
そもそもこのパッケージはどんなものか、githubに以下の文言がありました。

AudioPlayer
An AudioPlayer instance can play a single audio at a time (think of it as a single boombox).
(訳:)
AudioPlayerはひとつのインスタンスで一つの音声を再生できます。(ひとつのラジカセのような物と思ってください)

とりあえず実装!!

実装

パッケージ追加

$ flutter pub add audioplayers

インポート

import 'package:audioplayers/audioplayers.dart';

インスタンス

final player = AudioPlayer();

音声ソースを設定する方法は以下の4つがあるらしいのですが、今回はとりあえず音の出るボタンが出来ればいいので、AssetSourceを使って音声を取得します。

  • UrlSource
  • DeviceFileSource
  • AssetSource
  • BytesSource

AssetSource

AssetSourceを使用して音声ファイルを設定するのは簡単で、下記のコードを記述するだけで使えます。

await player.setSource(AssetSource('音声データのパス'));

具体的には、、、

  final player = AudioPlayer();
  final audioSourceUrl = 'assets/lib/audio/service-bell-ring-14610.mp3';

  void playSound() async {
    await player.setSource(AssetSource(audioSourceUrl));
  }

  void pauseSound() async{
    await player.pause();
  }

こんな感じで設定してあげる。

また、デフォルトでは音声データのパスはassetsディレクトリ内のデータを見るようですが、

final player = AudioPlayer();
player.audioCache = AudioCache(prefix: 'packages/OTHER_PACKAGE/assets/')
await player.play(AssetSource('other-package-audio.wav'));

上記の記述を用いることで、別のディレクトリを参照させることもできるようです。

最後に

audioplayersは、記述量も少なく簡単にサウンドボタンが作れるので便利なパッケージでした。
アプリ制作の助力になりそうです。

https://github.com/kite0311/audioplayers_sample

GitHubで編集を提案

Discussion