Ion-slides with different audio

ionic-v1
1

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>
        <audio controls source src="{{trustSrc(letters.audio)}}" type="audio/mpeg"></audio>
      </ion-slide-page>
    </ion-slides>

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

controllers here
.controller(‘alphabetController’, function($scope, $ionicSlideBoxDelegate, $ionicLoading, $cordovaMedia, $sce) {
$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');
     // this is where I think the magic takes place not sure please help.
     //$scope.play() each media one after the other as the slide changes
});

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

$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
}

});

here’s a similar pen I wanna share http://codepen.io/samcyn/pen/vKYRGy
Same problem…how to add audio into each slide and make them play one after the other as each slides passes away.

2

Yes!!! I got it. I just figure it out right now. What I did was to call a function which select all the audio tags in the DOM and then play each one of them when each slides are active.
Here’s a demo.

// This is use when slides are active
$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
//console.log($scope.activeIndex) which shows index values;
myFunction($scope.activeIndex)
});
function myFunction(number) {
var player = document.querySelectorAll(".audio");
player[number].play()
}