ember.js - Play/Pause Jquery toggle using actions in Ember -

ember.js - Play/Pause Jquery toggle using actions in Ember -

i building sound player/playlist in ember using soundmanager2 player.

i using next code play/pause actions, trigger song play , pause.

the problem running song play, pause not work. assume because variable mysound in pause action technically different song mysound in play action.

here code:

actions: { play: function(){ var track_id = this.id; var mysound = soundmanager.createsound({ id: track_id, url: 'https://api.soundcloud.com/tracks/' + track_id + '/stream?client_id=d61f17a08f86bfb1dea28539908bc9bf', autoplay: false, whileplaying: function() { $('#positionbar').css('width', ((this.position/this.duration) * 100) + '%'); }, }); this.set("isplaying", true); soundmanager.stopall(); mysound.play(); }, pause: function(){ var track_id = this.id; var mysound = soundmanager.createsound({ id: track_id, url: 'https://api.soundcloud.com/tracks/' + track_id + '/stream?client_id=d61f17a08f86bfb1dea28539908bc9bf', autoplay: false, whileplaying: function() { $('#positionbar').css('width', ((this.position/this.duration) * 100) + '%'); }, }); this.set("isplaying", false); mysound.pause(); }, }

any help helpful. new ember perhaps method of doing can done different, more efficient way.

just maintain track of mysound property , utilize in pause method.

actions: { play: function(){ var track_id = this.id; var mysound = soundmanager.createsound({ id: track_id, url: 'https://api.soundcloud.com/tracks/' + track_id + '/stream?client_id=d61f17a08f86bfb1dea28539908bc9bf', autoplay: false, whileplaying: function() { $('#positionbar').css('width', ((this.position/this.duration) * 100) + '%'); }, }); this.set("isplaying", true); this.set('mysound', mysound); soundmanager.stopall(); mysound.play(); }, pause: function(){ var mysound = this.get('mysound'); this.set("isplaying", false); if(mysound && mysound.pause){ mysound.pause(); } }, }

jquery ember.js