Callback zu getCurrentPosition jederzeit auf Cordova Media

Question

Ich verwende Cordova Media Plugin in einer Ionic Angular 2 App. Wir verwenden die API, um Dinge wie die Lautstärke zu steuern, zu überspringen und in den Audio 15 Sekunden usw. zurückzugehen. Wir suchen nach einer Fortschrittsanzeige, aber ich habe keine Dokumentation über Rückrufe gefunden, um ständig die Audiospurposition zu bekommen wo es gerade ist (brauche dies um den Fortschrittsbalken zu steuern). All die Dinge wie Lautstärke sind einfach zu tun, nur weil wir das Berührungsereignis haben, um es auszulösen. Wo wie mit dem Audio, wir brauchen ein Update, wo der Spieler ist. Wir haben getCurrentPosition in der controlSeconds-Funktion verwendet, aber ich weiß nicht, wie ich dies in Angular ständig aufrufen soll.

Weiß jemand wie man das macht/irgendwelche Dokumentation über ständig zurückrufen.

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'); 
    } 
} 

Dies ist der Code, den wir zur Zeit, und wir wollen, sind die Funktion des Ionen controlProgressBar Streckenelement in einer Ansicht wir haben zu steuern. Wie gesagt, wir brauchen einen Rückruf, der ständig nach der Uhrzeit sucht.

Answer 1

Sie können die Intervallfunktion in eckig verwenden, um die aktuelle Spielzeit wie unten gezeigt ständig zu überprüfen. Dies überprüft die aktuelle Zeit in jeder Sekunde und aktualisiert die Dauer und sollte daher die Ionenbereichssteuerposition widerspiegeln.

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