@samcyn wrote:

Hi, I have an app I'm working on using ion-slides. In each slides, I want different mp3 audios to play as the slide changes. The problem here is how to load my audio files into the DOM and have them playing as the slide changes.
here is my code
/html/

Alphabet

    <ion-slides  options="options" slider="data.slider">
      <ion-slide-page ng-repeat="letters in alphabets">
        <div class="box"><img ng-src="img/{{letters.img}}"></div>
      </ion-slide-page>
    </ion-slides>

  </ion-content>
</ion-pane>

controllers here
.controller('alphabetController', function($scope, $ionicSlideBoxDelegate, $ionicLoading, $cordovaMedia) {
$scope.alphabets = [
{
img: 'a.jpg',
audio: 'a.mp3'
},
{
img: 'b.jpg',
audio: 'b.mp3'
},
{
img: 'c.jpg',
audio: 'c.mp3'
},
{
img: 'd.jpg',
audio: 'd.mp3'
},
{
img: 'e.png',
audio: 'e.mp3'
}
];
setTimeout(function(){
$ionicSlideBoxDelegate.update();
},5000);

$scope.options = {
  loop: true,
  effect: 'fade',
  speed: 5000,
  autoplay: true
}

$scope.play = function(src){
	var media = new Media(src, null, null, mediaStatusCallback);
	$cordovaMedia.play(media);
}

var mediaStatusCallback = function(status){
	if (status == 1) {
		$ionicLoading.show({template: 'Loading'});
	}
	else{
		$ionicLoading.hide();
	}
}

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
  // data.slider is the instance of Swiper
  $scope.slider = data.slider;
  console.log(data.slider.activeIndex);
});

$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
  console.log('Slide change is beginning');
});

$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
  // note: the indexes are 0-based
  $scope.activeIndex = data.slider.activeIndex;
  $scope.previousIndex = data.slider.previousIndex;
});

});

Posts: 1

Participants: 1

Read full topic