Search code examples
javascriptaudiogoogle-analyticssoundmanager2

SoundManager2 onplay event configuration does not work

I use SoundManager2 for playing sounds on my web sites.

Now I'd like to send a Google Analytics Event each time the user plays a sound.

SoundManager2's documentation says that you can catch the "on play" event via setting a property but when using the 360-ui-player, this does not work.

I initialize the SoundManager2 like this:

<link rel="stylesheet" type="text/css" href="/app/sm/360/360player.css" />
<link rel="stylesheet" type="text/css" href="/app/sm/flashblock.css" />

<script src="/app/sm/360/berniecode-animator.js" type="text/javascript"></script>
<script src="/app/sm/soundmanager2-nodebug-jsmin.js" type="text/javascript"></script>
<script src="/app/sm/360/360player.js" type="text/javascript"></script>

<script type="text/javascript">
  soundManager.url = '/app/sm/swf/';
  threeSixtyPlayer.config = {
    playNext: false, 
    autoPlay: false, 
    allowMultiple: false,
    loadRingColor: '#ccc',
    playRingColor: '#AB3C2E',
    backgroundRingColor: '#eee',
    animDuration: 500,
    onplay: function() {
      alert('Playing!'); // DOES NOT WORK!
    },
    animTransition: Animator.tx.veryBouncy
  }        
</script>

Does anyone have a working solution to this?

I read about solutions where people changed the createSound() function in the SoundManager source code, but I would love to see a solution without changing the library as such.

Solution

  • Today I had a similar problem with my "onplay" callback set in the defaultOptions of soundmanager2, which wasn't called by soundmanager2 when 360player played a song.

    I found out that 360player.js calls soundManager.createSound() specifying its own "onplay" callback (the threeSixtyPlayer.events.play() function), thus overriding my default callback.

    Also, beware: there is no threeSixtyPlayer.config.onplay property to set for what I saw.

    A non-invasive solution should be to encapsulate callbacks, something like: 

    var onplay360 = threeSixtyPlayer.events.play;

var myOnplay = function(){
  ... your stuff... ;
  onplay360.apply(this); // forces the scope to 'this' = the sound object
};

threeSixtyPlayer.events.play = myOnplay;

    Hope this helps.

    Cheers, Marco