在 Cordova Media 上随时回调 getCurrentPosition

Question

我在 Ionic Angular 2 应用程序中使用 Cordova 媒体插件。我们正在利用 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-range 元素。就像我说的，我们需要一个不断检查时间的回调。

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

Answer 1

您可以在 Angular 中使用间隔函数来不断检查当前播放时间，如下图所示。这将检查每秒的当前时间并更新持续时间，因此它应该反映离子范围控制位置。

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