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

在Cordova Media上始终回调getCurrentPosition

1 个答案: