見出し画像

Flutterで効果音を設定する方法

ど素人から始めるFlutter

※2022/8/25追記あり
使用しているパッケージ（audioplayers）が最新バージョン（1.0.0以上？）では動きませんでした・・・
バージョン0.19.1でお試しください・・・

今回はFlutterの初期コードを使って、ボタンを押すと音が鳴るように実装しました。こんなのができます。


こんな人向け

・Flutterでとりあえず音を鳴らしたい
・Flutter初心者

下記の手順はMacでAndroid Studioを使った場合のものです。

①効果音をFlutterプロジェクトに保存する

今回は以下のサイトから効果音をダウンロードしました。
色々な音があって見る（聞く）だけでも楽しかったです。

Android Studioを開き、プロジェクト名右クリック → New → Directory を選択して「assets」ファイルを作成します。

画像1


assetsフォルダの中に先ほどダウンロードした効果音（horseRunning.mp3）を保存します。ファイル名は英語に変えておきました。

画像7

②pubspec.yaml に効果音ファイルを設定する

効果音や画像、パッケージをインストールする際にはpubspec.yaml ファイルに設定が必要です。このファイルは改行やインデント（必ずスペース2つ分！）にも注意する必要があります。

以下の部分を参考にして設定していきます。

画像4


# から始まっているところはコメントになっているので、# を外してインデントを揃えます。今回は効果音を保存した「assets」フォルダを設定したいので、下記のようになります。

画像5

ちなみに、# から始まっている緑色のコードは使わないので消してしまって大丈夫です。

pubspec.yaml ファイルを編集した後はPub getが必要ですが、この後の手順でも編集するのでまだPub getしません。

③audioplayersパッケージをインストールする

効果音を再生するためにパッケージを使います。
下記のページは「flutter audioplayers」などと調べると出てきます。


Installingタブのdependenciesのところを見ます。「audioplayers: ^0.19.1」のところをコピーします。

※2022/8/25追記
最新バージョン（1.0.0以上？）では下記コードは動きませんでした・・・
0.19.1でお試しください・・・

画像7

そしてpubspec.yaml のdependenciesのところに貼り付けます。

画像7


pubspec.yamlファイルの全文は以下のようになります。

name: flutter_sample
description: A new Flutter application.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1
environment:
 sdk: ">=2.7.0 <3.0.0"
dependencies:
 flutter:
   sdk: flutter
 cupertino_icons: ^1.0.2
 audioplayers: ^0.19.1
dev_dependencies:
 flutter_test:
   sdk: flutter
flutter:
 uses-material-design: true
 assets:
   - assets/


最後に「Pub get」をクリックします。

画像8

③コーディングする

ボタンを押したときに効果音が鳴るように実装します。今回の目標は鳴らすことだけなので、追加するコードは3行だけです。

①AudioCacheのインスタンスを_MyHomePageState class の中に作成します。

final _audio = AudioCache();


②main.dart のファイルにAudioPlayersをインポートします。

import 'package:audioplayers/audioplayers.dart';


③playメソッドを呼び出します。

_audio.play('horseRunning.mp3');


floatingActionButtonを押した時に _incrementCounter が呼び出されていたため、③のplayメソッドはこのメソッドの中に書いています。

画像8


main.dart の全文はこちら

import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
     ),
     home: MyHomePage(title: 'Flutter Demo Home Page'),
   );
 }
}
class MyHomePage extends StatefulWidget {
 MyHomePage({Key key, this.title}) : super(key: key);
 final String title;
 @override
 _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
 int _counter = 0;
 final _audio = AudioCache();
 void _incrementCounter() {
   setState(() {
     _counter++;
   });
   _audio.play('horseRunning.mp3');
 }
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: Text(widget.title),
     ),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           Text(
             'You have pushed the button this many times:',
           ),
           Text(
             '$_counter',
             style: Theme.of(context).textTheme.display1,
           ),
         ],
       ),
     ),
     floatingActionButton: FloatingActionButton(
       onPressed: _incrementCounter,
       tooltip: 'Increment',
       child: Icon(Icons.add),
     ),
   );
 }
}

手順は以上です。Runして動作確認をお願いします。

ちなみに、自分の環境では以下の時はうまくいきませんでした。

・効果音のファイル名が日本語
・pubspec.yaml の指定フォルダの後ろに/がない時
　（assets/ ではなく assets の時）
・pubspec.yaml で assets: の前にスペースが3つ入っていた時


以上、ありがとうございました！


この記事が気に入ったらサポートをしてみませんか？