2016-05-29 68 views
0

我被困在使用離子框架的特定應用程序上。我打算在幻燈片中播放音頻,因爲它們每個都經過。比方說,幻燈片A有音頻A,幻燈片b有音頻B,等等。如果幻燈片A出現,音頻A播放。幻燈片B出現,音頻B播放。這是應用程序中的一支筆。活動時在每個離子幻燈片內播放音頻

http://codepen.io/samcyn/pen/vKYRGy

<body ng-app="ionicApp" animation="slide-left-right-ios7" ng-controller="SlideController"> 
<div class="slide-wrapper"> 
    <ion-slide-box 
    active-slide="activeSlide" 
    does-continue="true" 
    on-slide-changed="slideChanged(index)" 
    show-pager="false"> 
    <ion-slide ng-repeat="item in items" > 
    <div class="box "> 
    <img ng-src="{{item.imageURL}}"> 
    <h1>{{item.text}}</h1></div> 
    </ion-slide> 
    </ion-slide-box> 
    </div> 
    </body> 

回答

0

是!我知道了。我現在就明白了。我所做的是調用一個函數來選擇DOM中的所有音頻標籤,然後在每個幻燈片處於活動狀態時播放它們中的每一個。這是一個演示。

http://codepen.io/samcyn/pen/VjYEbg

// 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() 
    }