在Cordova媒體上隨時回撥getCurrentPosition

Question

我在Ionic Angular 2應用程序中使用Cordova Media Plugin。我們正在利用這個API來做一些事情，比如控制音量，跳過並返回音頻15秒鐘等等。我們正在尋求實現一個進度條，但是我還沒有找到任何有關不斷獲取音軌位置的回調的文檔，它現在的位置（需要這個來控制進度條）。所有像音量這樣的事情都很容易做，因爲我們有觸摸事件觸發它。就音頻而言，我們需要更新玩家的位置。看看我們在controlSeconds函數中使用了getCurrentPosition，但我不知道如何在Angular中不斷調用它。

有誰知道如何做到這一點/有任何文件不斷回電。

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import { MediaPlugin, MediaObject } from '@ionic-native/media'; 

@IonicPage() 
@Component({ 
    selector: 'page-story', 
    templateUrl: 'story.html', 
}) 
export class StoryPage { 
    story:any; 
    isAudioPlaying:boolean=false; 
    volume: number; 
    audio: any; 
    position: number; 
    duration: number; 
    status: any; 


    // constructor 
    // -------------------------------------------------------------- 
    constructor(public navCtrl: NavController, public navParams: NavParams, private media: MediaPlugin) { 
     let story = navParams.get('story'); 
     this.story = story.fields; 
     console.log(this.story); 

     const file: MediaObject = this.media.create('http:' + this.story.audioFile.fields.file.url, (status) => { 
      this.status = status; 
      console.log(this.status); 
     }); 

     this.audio = file; 
     this.volume = 50; 
     this.position = 0; 
    } 

    controlVolume(event) { 
     var sliderValue = 100 - Number.parseInt(event._barR); 
     this.audio.setVolume(sliderValue/100); 
    } 

    controlProgressBar(event) { 
     // console.log('status: ' + this.status); 
     // 2 = playing 
     // 3 = paused 
     // console.log('scroll to: ' + Number.parseInt(event._barR)); 
     if(this.isAudioPlaying == true) { 
      this.audio.getCurrentPosition().then((position) => { 
       console.log(position); 
      }); 
     }  
    } 

    controlAudio(action){ 
     switch(action) { 
      case 'play': 
       this.audio.play(); 
       this.isAudioPlaying = true; 
       this.duration = this.audio.getDuration(); 
       break; 
      case 'pause': 
       this.audio.pause(); 
       this.isAudioPlaying = false; 
       break; 
     } 
    } 

    controlSeconds(type) { 
     this.audio.getCurrentPosition().then((position) => { 
      var number = Number.parseInt(position) * 1000; 
      switch(type){ 
       case 'back': 
        console.log(number); 
        this.audio.seekTo(number - 15000); 
        break; 
       case 'forward': 
        console.log(number); 
        this.audio.seekTo(number + 15000); 
        break; 
      } 
     }); 
    } 

    ngOnChanges(changes) { 
     console.log('change detected: ' + changes); 
    } 

    ionViewDidLoad() { 
     console.log('ionViewDidLoad Story Page'); 
    } 
} 

這是我們目前擁有的碼，我們是想功能controlProgressBar控制我們在一個視圖中的離子範圍元件。就像我說的，我們需要一個回調，只是不斷檢查時間。

<ion-item> 
    <ion-range min="0" max="100" [(ngModel)]="duration" color="secondary" (ionChange)="controlProgressBar($event)"></ion-range> 
</ion-item> 

Answer 1

可以使用間隔功能在角不斷地檢查當前的播放時間，如下面所示。這將在每秒鐘檢查當前時間，並將更新持續時間，因此它應該反映離子範圍控制位置。

setInterval(() => { 
    this.duration = this.audio.currentTime 
    }, 1000);