1. ก่อนเริ่มต้น
เกมเป็นประสบการณ์ภาพและเสียง Flutter เป็นเครื่องมือที่ยอดเยี่ยมในการสร้างภาพที่สวยงามและ UI ที่มีประสิทธิภาพ จึงช่วยให้คุณก้าวหน้าไปได้มากในด้านภาพ ส่วนผสมสุดท้ายที่ขาดหายไปคือเสียง ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีใช้ปลั๊กอิน flutter_soloud
เพื่อเพิ่มเสียงและเพลงที่มีเวลาในการตอบสนองต่ำลงในโปรเจ็กต์ คุณเริ่มต้นด้วยสคาฟเฟิลด์พื้นฐานเพื่อให้ข้ามไปยังส่วนที่น่าสนใจได้โดยตรง
แน่นอนว่าคุณสามารถใช้สิ่งที่ได้เรียนรู้ที่นี่เพื่อเพิ่มเสียงลงในแอป ไม่ใช่แค่เกม แต่แม้ว่าเกมเกือบทั้งหมดต้องใช้เสียงและเพลง แต่แอปส่วนใหญ่ไม่ใช้ โค้ดแล็บนี้จึงมุ่งเน้นที่เกม
ข้อกำหนดเบื้องต้น
- คุ้นเคยกับ Flutter ในระดับพื้นฐาน
- ความรู้เกี่ยวกับวิธีเรียกใช้และแก้ไขข้อบกพร่องของแอป Flutter
สิ่งที่คุณเรียนรู้
- วิธีเล่นเสียงแบบเล่นครั้งเดียว
- วิธีเล่นและปรับแต่งการวนเพลงแบบไม่ขาดตอน
- วิธีทำให้เสียงค่อยๆ ดังขึ้นหรือเบาลง
- วิธีใช้เอฟเฟกต์เสียงสภาพแวดล้อม
- วิธีจัดการกับข้อยกเว้น
- วิธีรวมฟีเจอร์ทั้งหมดเหล่านี้ไว้ในตัวควบคุมเสียงตัวเดียว
สิ่งที่ต้องมี
- Flutter SDK
- ตัวแก้ไขโค้ดที่คุณเลือก
2. ตั้งค่า
- ดาวน์โหลดไฟล์ต่อไปนี้ ไม่ต้องกังวลหากการเชื่อมต่อช้า คุณต้องใช้ไฟล์จริงในภายหลัง ดังนั้นให้ดาวน์โหลดไฟล์ขณะที่คุณทำงาน
- สร้างโปรเจ็กต์ Flutter ด้วยชื่อที่ต้องการ
- สร้างไฟล์
lib/audio/audio_controller.dart
ในโปรเจ็กต์ - ในไฟล์ ให้ป้อนรหัสต่อไปนี้
lib/audio/audio_controller.dart
import 'dart:async';
import 'package:logging/logging.dart';
class AudioController {
static final Logger _log = Logger('AudioController');
Future<void> initialize() async {
// TODO
}
void dispose() {
// TODO
}
Future<void> playSound(String assetKey) async {
_log.warning('Not implemented yet.');
}
Future<void> startMusic() async {
_log.warning('Not implemented yet.');
}
void fadeOutMusic() {
_log.warning('Not implemented yet.');
}
void applyFilter() {
// TODO
}
void removeFilter() {
// TODO
}
}
ดังที่คุณเห็น นี่เป็นแค่โครงร่างของฟังก์ชันการทำงานในอนาคต เราจะติดตั้งใช้งานทั้งหมดในระหว่างโค้ดแล็บนี้
- ถัดไป ให้เปิดไฟล์
lib/main.dart
แล้วแทนที่เนื้อหาด้วยโค้ดต่อไปนี้
lib/main.dart
import 'dart:developer' as dev;
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:logging/logging.dart';
import 'audio/audio_controller.dart';
void main() async {
// The `flutter_soloud` package logs everything
// (from severe warnings to fine debug messages)
// using the standard `package:logging`.
// You can listen to the logs as shown below.
Logger.root.level = kDebugMode ? Level.FINE : Level.INFO;
Logger.root.onRecord.listen((record) {
dev.log(
record.message,
time: record.time,
level: record.level.value,
name: record.loggerName,
zone: record.zone,
error: record.error,
stackTrace: record.stackTrace,
);
});
WidgetsFlutterBinding.ensureInitialized();
final audioController = AudioController();
await audioController.initialize();
runApp(MyApp(audioController: audioController));
}
class MyApp extends StatelessWidget {
const MyApp({required this.audioController, super.key});
final AudioController audioController;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter SoLoud Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.brown),
),
home: MyHomePage(audioController: audioController),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.audioController});
final AudioController audioController;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
static const _gap = SizedBox(height: 16);
bool filterApplied = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Flutter SoLoud Demo')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
OutlinedButton(
onPressed: () {
widget.audioController.playSound('assets/sounds/pew1.mp3');
},
child: const Text('Play Sound'),
),
_gap,
OutlinedButton(
onPressed: () {
widget.audioController.startMusic();
},
child: const Text('Start Music'),
),
_gap,
OutlinedButton(
onPressed: () {
widget.audioController.fadeOutMusic();
},
child: const Text('Fade Out Music'),
),
_gap,
Row(
mainAxisSize: MainAxisSize.min,
children: [
const Text('Apply Filter'),
Checkbox(
value: filterApplied,
onChanged: (value) {
setState(() {
filterApplied = value!;
});
if (filterApplied) {
widget.audioController.applyFilter();
} else {
widget.audioController.removeFilter();
}
},
),
],
),
],
),
),
);
}
}
- หลังจากดาวน์โหลดไฟล์เสียงแล้ว ให้สร้างไดเรกทอรีที่รูทของโปรเจ็กต์ชื่อ
assets
- ในไดเรกทอรี
assets
ให้สร้างไดเรกทอรีย่อย 2 รายการ โดยให้ชื่อไดเรกทอรีหนึ่งว่าmusic
และอีกชื่อหนึ่งว่าsounds
- ย้ายไฟล์ที่ดาวน์โหลดไปยังโปรเจ็กต์เพื่อให้ไฟล์เพลงอยู่ในไฟล์
assets/music/looped-song.ogg
และเสียงปืนอยู่ในไฟล์ต่อไปนี้
assets/sounds/pew1.mp3
assets/sounds/pew2.mp3
assets/sounds/pew3.mp3
ตอนนี้โครงสร้างโปรเจ็กต์ควรมีลักษณะดังนี้
เมื่อสร้างไฟล์แล้ว คุณต้องแจ้งให้ Flutter ทราบ
- เปิดไฟล์
pubspec.yaml
แล้วแทนที่ส่วนflutter:
ที่ด้านล่างของไฟล์ด้วยข้อมูลต่อไปนี้
pubspec.yaml
...
flutter:
uses-material-design: true
assets:
- assets/music/
- assets/sounds/
- เพิ่มการพึ่งพาแพ็กเกจ
flutter_soloud
และแพ็กเกจlogging
flutter pub add flutter_soloud logging
ตอนนี้ไฟล์ pubspec.yaml
ควรมี Dependency เพิ่มเติมในแพ็กเกจ flutter_soloud
และ logging
pubspec.yaml
...
dependencies:
flutter:
sdk: flutter
flutter_soloud: ^3.1.10
logging: ^1.3.0
...
- เรียกใช้โปรเจ็กต์ ยังไม่มีฟังก์ชันการทำงานเนื่องจากคุณเพิ่มฟังก์ชันการทำงานในส่วนต่อไปนี้