seekTo seems call in loop

[maigussoft]

Hi, When playing, seekto, audio player is looping. I think issue is related to audio-track-progress-bar.

  <ion-list no-lines>
      <audio-track #track [track]="m_track">
        <ion-item>
          <audio-track-play item-left [audioTrack]="track"><ion-spinner></ion-spinner></audio-track-play>
          <div item-content style="width:100%">
            <audio-track-progress-bar dark duration progress [audioTrack]="track" [ngStyle]="{visibility: track.completed > 0 ? 'visible' : 'hidden'}"></audio-track-progress-bar>
          </div>
        </ion-item>
      </audio-track>
  </ion-list>

{ "name": "ionic-hello-world", "version": "0.0.0", "author": "Ionic Framework", "homepage": "http://ionicframework.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve" }, "dependencies": { "@angular/common": "4.0.2", "@angular/compiler": "4.0.2", "@angular/compiler-cli": "4.0.2", "@angular/core": "4.0.2", "@angular/forms": "4.0.2", "@angular/http": "4.0.2", "@angular/platform-browser": "4.0.2", "@angular/platform-browser-dynamic": "4.0.2", "@ionic-native/core": "3.4.2", "@ionic-native/splash-screen": "3.4.2", "@ionic-native/status-bar": "3.4.2", "@ionic/app-scripts": "^1.3.7", "@ionic/storage": "2.0.1", "@types/jquery": "^2.0.41", "@types/lodash": "^4.14.63", "ionic-angular": "3.1.0", "ionic-audio": "^3.0.0", "ionicons": "3.0.0", "jquery": "^3.2.1", "lodash": "^4.17.4", "rxjs": "5.1.1", "sw-toolbox": "3.4.0", "ts-md5": "^1.2.0", "zone.js": "^0.8.5" }, "devDependencies": { "@ionic/app-scripts": "1.3.5", "typescript": "~2.2.1" }, "cordovaPlugins": [ "cordova-plugin-statusbar", "cordova-plugin-splashscreen", "ionic-plugin-keyboard", "cordova-plugin-console", "cordova-plugin-device", "cordova-plugin-whitelist" ], "cordovaPlatforms": [], "description": "front: An Ionic project" }

Thanks for helps and fixing

[arielfaur]

Do you have a link to a codepen? I would need to see a full example.

[mkatakam]

HI arielfaur,

I have the same problem... Please find the project here https://drive.google.com/file/d/0B3fFfEzXyemqOHUtUDd3Rk0yZm8/view?usp=sharing

The players works very well. Audio starts immediately but skipping and repeating after 15 seconds and skips few times.... Audio without the progress bar is working fine.

I hope these files help you resolve this issue

Thanks and Regards Matthew

[davidanquetin]

Hello, exactly the same problem. AudioProvider without progress bar is woking fine, but with progress bar, audio is looping, and console show this :

For info, i am playing local file. I have only one file to display and play at the same time (this.myTracks has length of 1). The file has no thumbnail, no author and no title.

If you need some files or other infos, please tell me. Thanks, i hope you could resolve this. Regards David

[primalconsultancy]

Also facing the same issue in browser view (haven't tried it in app yet) - when progress bars are path of the HTML, playing loops for 3 seconds. I thought it was caused by using remote source (I am loading my playlist from a server and also the mp3 files are stored on a server, while the app is still local on my computer) until I've read this thread and found out that commenting the audio-track-progress-bar in the HTML code indeed "solved" the problem - now audio playing works fine.

Greets, Dimiter

[jgarifuna]

I'm also experiencing the same issue. When I remove the progress bar only one call gets made to the server, however, the 7 second audio I have, does not play. I seems to attempt to play, but it loops around the 3 second mark to the beginning.

[ANANDAN0693]

I'm also spacing the same issue today .any solution to solve this

[ANANDAN0693]

i made some come changes in ionic -audio-track-progress-component.ts <ion-range [(ngModel)]="range" min="0" max="100" (ngModelChange)="seekTo()" name="progress" ngDefaultControl> <time *ngIf="showProgress" range-left>{{audioTrack.progress | audioTime}}</time> <time *ngIf="showDuration" range-right>{{audioTrack.duration | audioTime}}</time> </ion-range> i just changed (ionChange) to (ngModelChange) now its working fine

[arielfaur]

It seems that I will have to look into this 😢

[sjosen]

I have the same issue. Files playing over and over after just a few seconds. The strange thing though is that when I cloned the repo and ran ionic serve in the demo dir, the problem was not there. I'm not smart enough to track down the issue though

[primalconsultancy]

I have spent too much time trying to debug this issue. At the end I decided to develop my own player with playlists and controls and now it works just fine. Using Ionic 3 and native plugins Media and MusicControls - more than enough. Having a progress bar takes 5 lines of code. Another 5 lines for current time update...

[Gjallanhorn]

ANANDAN0693 commented 6 days ago i made some come changes in ionic -audio-track-progress-component.ts

<ion-range [(ngModel)]="range" min="0" max="100" (ngModelChange)="seekTo()" name="progress" ngDefaultControl> <time *ngIf="showProgress" range-left>{{audioTrack.progress | audioTime}}</time> <time *ngIf="showDuration" range-right>{{audioTrack.duration | audioTime}}</time> </ion-range>
i just changed (ionChange) to (ngModelChange) now its working fine

Works!!! Tks!!!

[sjosen]

Editing the ionic-audio-track-progress-component.ts doesn't change anything for me. I have to make the change in ionic-audio-track-progress-component.js instead. What am I doing wrong?

[Gjallanhorn]

Exactly, you gave to change the .js file too. Or gulp .ts file.

[arielfaur]

132

[betatools]

Hello. With 3.0.4 this is an issue for me again. Changing ionChange to ngModelChange doesn't work for me this time. Removing the progressbar from the view works but is not the desired solution.

global packages:

@ionic/cli-utils : 1.4.0
Cordova CLI      : 7.0.1 
Ionic CLI        : 3.4.0

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.2.2 ios 4.4.0
Ionic Framework                 : ionic-angular 3.4.2

System:

Node       : v6.11.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.1 
ios-sim    : 6.0.0 
npm        : 3.10.10 

[betatools]

After some testing it seems that it works when building without --prod but not with. Just fyi

[hvlads]

<progress id="progressbar" name="range" (click)="seekTo($event)" max="100" width="100%" [value]="range"></progress>

seekTo($event) { let x = $event.offsetX, y = $event.srcElement.offsetWidth, clickedValue = x/(y / 100) ; this.range = clickedValue; let seekTo: number = Math.round(this.singleTrack.duration*clickedValue)/100; if (!Number.isNaN(seekTo)) this.singleTrack.seekTo(seekTo); }

[MattyWilkinson]

As noted above by @maigussoft, this problem only occurs when there's an audio-track-progress-bar associated with the track.

This issue can be observed in the demo app when running on Android with the first two (John Mayer) tracks, but not with the 3rd (Stephane Wrembel) track. Removing the progress bar from either of the first two tracks causes the problem to go away for that track.

The logcat logs from my Android emulator show that seekTo() is being called periodically (despite no user interaction), which would account for the audio very briefly dropping out and sometimes rewinding slightly.

I suspect this is because the ngDoCheck() functions sets this.range, causing an (ionChange) event to be triggered (even though it's not originating from user interaction).

this.range = Math.round(this.completed*100*100)/100;

I tried changing the binding to use (click) instead of (ionChange)but the event doesn't fire when clicking on the draggable knob, it only triggers when clicking on the completed and remaining times. I'm not sure what the best way to fix this is, but I believe the key is to only seek when the user is changing the slider/knob, not the internal code. Thoughts?

[arielfaur]

This has been fixed in 3.1.0. I refactored the progress bar component which was causing trouble. It was based on the Ionic's ion-range control that didn't play well with the seekTo() functionality. I had to refactor the component using a standard HTML range component which is fully customizable using SASS variables.

[arielfaur]

I would appreciate any feedback 😄