How to add sound effects/tunes on ui events?


#1

I am developing an app with phonegap+ionic.
Sometimes I want to have some sound effect when a button is clicked or some thing happens. I am wondering if someone has tried this with ionic. Any advice and hints are welcomed.


#2

You can use cordova’s media plugin to play a wav file when a buttons clicked.

http://plugins.cordova.io/#/package/org.apache.cordova.media


#3

OK. Bu is audio element of HTML5 a good option, too?


#4

Not really, I would stick to using the cordova plugin, it’s much more effective and can work across devices that don’t support HTML5 Audio


#5

+1 for the Cordova plugin, it’s REALLY easy to use and depending on the type of file you’re playing it’ll play pretty much across anything.

HTML5 audio is too inconsistent IMO.

Take a look at the doc mhartington linked to, it’s really easy to use and this way there are events for you to know when the audio has started, stopped or failed to play (if you need such functionality).


#6

@mhartington @edwrede_ZA Thank you guys. :slight_smile:
I will give the plugin a try.


#7

@mhartington Can you suggest guidelines or good practices that has to be followed when using the media plugin.


#8

This has worked well for me…as far as making cordova’s audio plugin play well with angular.

// for media plugin : http://plugins.cordova.io/#/package/org.apache.cordova.media
.factory('MediaSrv', function($q, $ionicPlatform, $window) {
  var service = {
    loadMedia: loadMedia,
    getStatusMessage: getStatusMessage,
    getErrorMessage: getErrorMessage
  };

  function loadMedia(src, onError, onStatus, onStop) {
    var defer = $q.defer();
    $ionicPlatform.ready(function() {
      var mediaSuccess = function() {
        if (onStop) {
          onStop();
        }
      };
      var mediaError = function(err) {
        _logError(src, err);
        if (onError) {
          onError(err);
        }
      };
      var mediaStatus = function(status) {
        if (onStatus) {
          onStatus(status);
        }
      };

      if ($ionicPlatform.is('android')) {
        src = '/android_asset/www/' + src;
      }
      defer.resolve(new $window.Media(src, mediaSuccess, mediaError, mediaStatus));
    });
    return defer.promise;
  }

  function _logError(src, err) {
    console.error('media error', {
      code: err.code,
      message: getErrorMessage(err.code)
    });
  }

  function getStatusMessage(status) {
    if (status === 0) {
      return 'Media.MEDIA_NONE';
    } else if (status === 1) {
      return 'Media.MEDIA_STARTING';
    } else if (status === 2) {
      return 'Media.MEDIA_RUNNING';
    } else if (status === 3) {
      return 'Media.MEDIA_PAUSED';
    } else if (status === 4) {
      return 'Media.MEDIA_STOPPED';
    } else {
      return 'Unknown status <' + status + '>';
    }
  }

  function getErrorMessage(code) {
    if (code === 1) {
      return 'MediaError.MEDIA_ERR_ABORTED';
    } else if (code === 2) {
      return 'MediaError.MEDIA_ERR_NETWORK';
    } else if (code === 3) {
      return 'MediaError.MEDIA_ERR_DECODE';
    } else if (code === 4) {
      return 'MediaError.MEDIA_ERR_NONE_SUPPORTED';
    } else {
      return 'Unknown code <' + code + '>';
    }
  }

  return service;
})


.controller('AudioCtrl', function($scope, MediaSrv) {
  $scope.playAudio = function() {
    MediaSrv.loadMedia('sounds/240.mp3').then(function(media) {
      media.play();
    });
  }
})

#9

Hi,

As I mentionned it on an other topic, this plugin requires A LOT OF permissions just for playing sounds :frowning:

  • android.permission.WRITE_EXTERNAL_STORAGE
  • android.permission.RECORD_AUDIO
  • android.permission.MODIFY_AUDIO_SETTINGS
  • android.permission.READ_PHONE_STATE

And it scared some users… :frowning:

I’m looking for alternatives but I haven’t found some for now…


[iOS Solved, andoid?] Sound Effects, not audio stream?
#10

Yes, you are right.
Maybe the media plugin would better be splitted into two plugins for playing and recording media…


#11

This works wonderful, thank you.