coolhack7
coolhack7

Reputation: 1224

Issue playing sound from local asset on Flutter App

I'm currently getting the below error on trying to get my app to play an mp3 file when a button is clicked. I have used the audioplayers: ^0.20.1 plugin. I've never triggered sounds before and wonder how this can be implemented correctly. The idea is to develop a slot machine with three slots and everytime any button on that is clicked, it should start spinning with the sound playing in the background till the time it spins. The slot machine functionality works as it should. The error and the code are below:

E/flutter (28991): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: MissingPluginException(No implementation found for method play on channel xyz.luan/audioplayers)
E/flutter (28991): #0      MethodChannel._invokeMethod
package:flutter/…/services/platform_channel.dart:165
E/flutter (28991): <asynchronous suspension>
E/flutter (28991): #1      AudioPlayer.invokeMethod (package:audioplayers/src/audioplayer.dart:151:20)
E/flutter (28991): <asynchronous suspension>
E/flutter (28991): #2      AudioPlayer.play (package:audioplayers/src/audioplayer.dart:173:20)
E/flutter (28991): <asynchronous suspension>
E/flutter (28991): #3      AudioCache.play (package:audioplayers/src/audio_cache.dart:164:5)
E/flutter (28991): <asynchronous suspension>
E/flutter (28991): #4      _SlotMachineViewState.soundEffectpackage:boozimba/…/views/slot_machine_view.dart:173
E/flutter (28991): <asynchronous suspension>
E/flutter (28991):

The third line from the bottom is the line of code where I try invoking the method to play the sound. The snippet below are the methods that spin the slot machine:

final leftRoller = GlobalKey<RollerListState>();
  final middleRoller = GlobalKey<RollerListState>();
  final rightRoller = GlobalKey<RollerListState>();
  Timer? rotator;
  Duration _ROTATION_DURATION = Duration(milliseconds: 100);

  final _random = Random();

  void _startRotating() {
    rotator = Timer.periodic(_ROTATION_DURATION,
        _rotateRoller); //let's use timer to do rotations periodically
  }

  void _startRotatingLeftRoller() {             //This is to rotate the slot on the left
    rotator = Timer.periodic(_ROTATION_DURATION, _rotateLeftRoller);
  }

  void _rotateLeftRoller(_) {              
    final leftRotationTarget = _random.nextInt(3 * foodSlots.length);
    leftRoller.currentState!.smoothScrollToIndex(leftRotationTarget,
        duration: _ROTATION_DURATION, curve: Curves.linear);
  }

  void _startRotatingMiddleRoller() {           //This is to rotate the slot in the middle
    rotator = Timer.periodic(_ROTATION_DURATION, _rotateMiddleRoller);
  }

  void _rotateMiddleRoller(_) {
    final middleRotationTarget = _random.nextInt(3 * drinkSlots.length);
    middleRoller.currentState!.smoothScrollToIndex(middleRotationTarget,
        duration: _ROTATION_DURATION, curve: Curves.linear);
  }

  void _startRotatingRightRoller() {           //Rotates the slot on the right
    rotator = Timer.periodic(_ROTATION_DURATION, _rotateRightRoller);
  }

  void _rotateRightRoller(_) {
    final rightRotationTarget = _random.nextInt(3 * moodSlots.length);
    rightRoller.currentState!.smoothScrollToIndex(rightRotationTarget,
        duration: _ROTATION_DURATION, curve: Curves.linear);
  }

  void _rotateRoller(_) {
    final leftRotationTarget = _random.nextInt(3 * foodSlots.length);
    final middleRotationTarget = _random.nextInt(3 * drinkSlots.length);
    final rightRotationTarget = _random.nextInt(3 * moodSlots.length);
    leftRoller.currentState!.smoothScrollToIndex(leftRotationTarget,
        duration: _ROTATION_DURATION,
        curve: Curves
            .linear); //it is possible to select custom duration and curve for this animation
    middleRoller.currentState!.smoothScrollToIndex(middleRotationTarget,
        duration: _ROTATION_DURATION,
        curve: Curves
            .linear); //it is possible to select custom duration and curve for this animation
    rightRoller.currentState!.smoothScrollToIndex(rightRotationTarget,
        duration: _ROTATION_DURATION, curve: Curves.linear);
    soundEffect();                        //This is where I tried playing the sound
  }

  Future<AudioPlayer> soundEffect() async {    //The soundEffect method
    AudioCache cache = new AudioCache();
    return await cache.play('slotMachineSound.mp3');
  }

  void _finishRotating() {
    rotator?.cancel();
  }

The widget that triggers the slot machine:

Positioned(
                    top: height * 0.085,
                    left: width * 0.062,
                    child: Container(
                      padding: EdgeInsets.only(
                          left: MediaQuery.of(context).size.width * 0.15),
                      // color: Colors.red,
                      child: TextButton(
                          onPressed: onPressedValue == true
                              ? () {
                                  setState(() {
                                    onPressedValue = false;
                                  });
                                  Timer(Duration(seconds: 2), () {
                                    setState(() {
                                      onPressedValue = true;
                                    });
                                  });

                                  _startRotating();       //This is where the _startRotating method is triggered
                                  Timer.periodic(Duration(milliseconds: 10000),
                                      (Timer t) => _finishRotating());
                                }
                              : null,
                          child: Text(
                            "SPIN ALL",
                            style: TextStyle(
                                // color: Color.fromRGBO(0, 24, 152, 1),
                                shadows: [
                                  Shadow(
                                      color: Color.fromRGBO(0, 24, 152, 1),
                                      blurRadius: 2,
                                      offset: Offset(0, 0))
                                ],
                                foreground: Paint()
                                  ..strokeWidth = 2
                                  ..color = Color.fromRGBO(0, 24, 152, 1)
                                  ..style = PaintingStyle.fill
                                  ..maskFilter =
                                      MaskFilter.blur(BlurStyle.inner, 2),
                                fontWeight: FontWeight.bold),
                          )),
                    ),
                  ),

This here is my pubspec.yaml file in case you find something wrong here:

dependencies:
  cupertino_icons: ^1.0.2
  flutter:
    sdk: flutter
  audioplayers: ^0.20.1

assets:
   - assets/slotMachineSound.mp3    //This here is the mp3 file

Upvotes: 1

Views: 166

Answers (1)

Sobin Benny
Sobin Benny

Reputation: 221

This exception will throw when you do hot reload or hot restart. I think you can fix this by Restarting the application.

Upvotes: 1

Related Questions