前提の話ですが、あらかじめテトリスゲームを作成した後の作業になりますのでご了承をお願いしますね（＾＾）
自分が作成したこのテトリスゲームに音を入れるのが目的です。
めいぶ今回は自分が作成したテトリスゲームに音を入れるのが目的です。
結論から言います。
Flutterに音を入れるには、次の5ステップだけです。
- 効果音をダウンロード
- assetsフォルダに入れる
- pubspec.yamlに登録
- audioplayersを追加
- ライン消去時に音を鳴らすコードを書く
でも――
実際はここで必ずエラーが出ます。
この記事では
実際につまずいたポイントも含めて全部解説します。
なぜ音追加は初心者がつまずくのか？
理由は3つあります。
- フォルダ構造がわからない
- pubspec.yamlのスペース地獄
- カッコ（Wrap）の閉じ忘れ
実はコードよりも
設定ミスで止まることのほうが多いです。
目次
STEP1：効果音を入手する
おすすめ無料サイト
効果音ラボ
👉 https://soundeffect-lab.info/
特徴：
- 登録不要
- すぐダウンロード可能
- ゲーム向け効果音が豊富
- 初心者に最もおすすめ
🎵 OtoLogic（少し本格派）
特徴：
- きれいな高品質サウンド
- 商用利用OK（条件あり）
- 8ビット風などもある
🎵 魔王魂（迫力系が豊富）
特徴：
- 爆発・RPG系が強い
- BGMも充実
- 利用規約の確認は必須
ダウンロードしたら名前を
line.mp3
に変更。
STEP2：assetsフォルダに入れる
正しい場所
pomodorotimer
└ assets
└ audio
└ line.mp3
よくあるミス
❌ ダウンロードフォルダのまま
❌ line.mp3.mp3 になっている
STEP3：pubspec.yamlに登録
ここが最初の壁。
正しくはこう。
flutter:
uses-material-design: true assets:
- assets/audio/line.mp3
超重要
- assetsの前はスペース2つ
- の前はスペース4つ
- タブ禁止
ここでインデントを間違えると即エラー。
STEP4：audioplayersを追加
dependenciesに追加。
dependencies:
flutter:
sdk: flutter
audioplayers: ^5.2.1
そしてターミナルで
flutter pub get
Windowsユーザーの最大の罠
こんなエラーが出ることがあります。
Building with plugins requires symlink support.
Please enable Developer Mode
解決方法
Windowsの「開発者モード」をONにする。
これを知らないと永遠に止まります。
STEP5：音を鳴らすコードを書く
import追加
import 'package:audioplayers/audioplayers.dart';
State内に追加
late AudioPlayer player;
initStateで初期化
player = AudioPlayer();
まずは音テストボタンを作る
いきなりライン消去に入れると混乱します。
まずはボタンで確認。
ElevatedButton(
onPressed: () {
player.play(AssetSource('audio/line.mp3'));
},
child: const Text('音テスト'),
),
Wrapエラー地獄の正体
初心者が一番ハマるのがこれ。
],
),
),
カッコの数がズレる問題。
Flutterは
- 開いたら必ず閉じる
- children: [ のあとは ],
- Wrap( のあとは ),
というルール。
1個でも多いと真っ赤になります。
ライン消去時に音を鳴らす
if (cleared > 0) {
_playLineSound();
lines += cleared;
}
これで完成。
まとめ
Flutterで音を入れる作業は
- 設定7割
- コード3割
です。
でも一度越えると
「自分は演出を入れられる人」
になります。
コメント