效果图
一共有七个按键,每个按键代表不同的音阶。
使用dart的audioplayers库
像乐高积木一样,有一些已经预先构建好的部件就是库。实现一些功能可能需要花费几个月,但是使用库就可以快速的使用这些功能。
使用audioplayers可以在不同的设备上播放声音。
audioplayers库的注意要点
文档地址
播放声音时有几个不同的类来获取要播放的声音。
要特别注意声音文件是从不同的位置获取的。
UrlSource: get the audio from a remote URL from the Internet. This can be a direct link to a supported file to be downloaded, or a radio stream.
DeviceFileSource: access a file in the user’s device, probably selected by a file picker
AssetSource: play an asset bundled with your app, normally within the assets directory.
UrlSource:从网络获取声音。
DeviceFileSource:从设备的存储中获取声音。
AssetSource:从编程的静态文件中获取声音。
如果使用DeviceFileSource的话,虽然在网页中可以播放声音,但是在安卓端会提示找不到文件。
这是因为声音文件在静态资源中,所以要使用静态资源来播放声音。
库的使用方法
在pubspec.yaml
中配置库的依赖。
dependencies:
audioplayers: ^4.0.1
在main.dart
中导入库
import 'package:audioplayers/audioplayers.dart';
在pubspec.yaml
配置静态资源的位置。
注意:audioplayers 默认以assets/文件夹为路径的前缀。
assets:
- assets/audios/
这里配置在assets下的audios文件夹下。
播放音频。
final player = AudioPlayer();
await player.play(AssetSource('audios/文件名.wav'));
创建程序的界面
播放声音函数
函数说明:函数传入了按键的颜色和播放声音的编号。
void playSound(int soundNumber) async {
//create a new player
final player = AudioPlayer();
await player.play(AssetSource('audios/note$soundNumber.wav'));
}
使用函数创建组件
如果一个组件被多次使用,那么需要使用一个函数来构建这个组件。函数的返回值为组件的类名。
Expanded组件使用注意事项:Expanded必须为row
或者column
的孩子。
Expanded是一个可以扩展的组件,和flex布局类似。
Expanded buildKey(Color color, int soundNumber) {
return Expanded(
child: TextButton(
style: TextButton.styleFrom(
backgroundColor: color,
),
onPressed: () {
playSound(soundNumber);
},
child: const Text(''),
),
);
}
完整代码
程序使用了StatelessWidget
无状态组件。组件在构建之后,颜色和其中的声音是固定的,组件不需要重新绘制。
void main() {
runApp(const XyMusic());
}
class XyMusic extends StatelessWidget {
const XyMusic({super.key});
Widget build(BuildContext context) {
void playSound(int soundNumber) async {
//create a new player
final player = AudioPlayer();
await player.play(AssetSource('audios/note$soundNumber.wav'));
}
Expanded buildKey(Color color, int soundNumber) {
return Expanded(
child: TextButton(
style: TextButton.styleFrom(
backgroundColor: color,
),
onPressed: () {
playSound(soundNumber);
},
child: const Text(''),
),
);
}
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
buildKey(Colors.red, 1),
buildKey(Colors.orange, 2),
buildKey(Colors.yellow, 3),
buildKey(Colors.green, 4),
buildKey(Colors.teal, 5),
buildKey(Colors.blue, 6),
buildKey(Colors.purple, 7),
],
),
),
),
);
}
}