在活动时在每个离子滑块内播放音频

时间:2016-05-29 19:41:52

标签: angularjs ionic-framework

我被困在一个特定的应用程序上我正致力于使用Ionic框架。我打算在幻灯片中播放音频,因为每个幻灯片都经过。假设幻灯片A具有音频A,SLIDE b HAS音频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>

1 个答案:

答案 0 :(得分: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()
    }