【flutter】制作一个木琴

效果图

在这里插入图片描述
一共有七个按键,每个按键代表不同的音阶。

使用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),
            ],
          ),
        ),
      ),
    );
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值