I have a partial with the following fragment
<div id="playDiv" ng-show="audioAvailable">
<br/>
<button play-pause-toggle data-play="Play" data-pause="Pause">Play</button>
<button ng-click="soundManager.sounds[soundManager.soundIDs[0]].play()">Play</button>
</div>
I'm resolving an issue where the play-pause-toggle directive from the angular-soundmanager2 library is failing to work. It does work the first time I load the page. If I load a second sound I have code that remove other sounds. This removes the other sounds but the new sound does not play. If I run the code within ng-click within the console the sound plays ... and after I play the sound from the console the play-pause-toggle button works again.
How do I make the ng-click directive call soundManager.sounds[soundManager.soundIDs[0]].play()?
Here is the controller code that is clearing old sounds.
angular.module('infosystem',['angularSoundManager']).controller("insightsDetailCtrl", function ($scope, $stateParams, $rootScope, $http, $sce) {
var debug = true ;
SC.initialize({
client_id: "YOUR_SOUNDCLOUD_CLIENT_ID"
});
if ( !$rootScope.soundManagerObjects ) {
$rootScope.soundManagerObjects = [] ;
}
function soundManagerIdCheck(id){
var result = false ;
if ( soundManager ) {
var sound = soundManager.getSoundById(id) ;
if ( sound ) {
result = true ;
}
}
return result ;
}
function asyncLoop(o) {
var i = -1;
var loop = function() {
i++;
if(i == o.length) {
o.callback();
return;
}
o.functionToLoop(loop, i);
};
loop(); //init
}
$scope.loading_insights = true;
$scope.load_insight = function (insight_id) {
$scope.loading_insights = true;
$http({
method: 'GET',
url: $rootScope.serverURL + 'insights/' + insight_id,
headers: {
'Accept': 'application/json'
}
})
.success(function (data) {
$scope.loading_insights = false;
data.description=$sce.trustAsHtml(data.description);
data.audio=$sce.trustAsHtml(data.audio);
$scope.insight = data;
$rootScope.audioAvailable = false ;
if ( data.soundcloud_track ) {
SC.stream( '/tracks/' + data.soundcloud_track.id , function( sm_object ){
var track = {
id: data.soundcloud_track.id,
title: data.soundcloud_track.title,
artist: data.soundcloud_track.artist,
url: sm_object.url
};
$rootScope.audioAvailable = true ;
$rootScope.smId = sm_object.id ;
var smIdsLength = soundManager.soundIDs.length;
asyncLoop({
length: smIdsLength,
functionToLoop: function(loop, i) {
setTimeout(function() {
//custom code
var soundManagerId = soundManager.soundIDs[0] ;
if ( soundManagerIdCheck(soundManagerId)){
soundManager._wD('soundManager.stop(' + soundManagerId + ')', 1);
}
if ( soundManagerId ) {
if ( $rootScope.smId != soundManagerId) {
soundManager.destroySound(soundManagerId);
}
}
//custom code
loop();
}, 100);
},
callback: function() {
//callback custom code
//callback custom code
}
}
);
}) ;
}
})
.error(function (error) {
$scope.loading_insights = false;
})
}
$scope.load_insight($stateParams.insight_id);
})
Have it in a function which will reside in scope of controller and try calling your code soundManager.sounds[soundManager.soundIDs[0]].play()
hope this will help.