Streaming audio urls

[jwhijazi]

Thanks for developing this component.

I'm using your ngx-audio-player for streaming audio from url. The player is working fine but the end time displayed looks like this (-ty:aN). I think this is because the stream doesn't contain end time.

So it would be great if you consider the situation when the stream url is endless.

Thanks.

[jossemarGT]

Hey @jwhijazi I think you are looking for displayDuration property. Happy hacking :octocat:

[wleader]

I am seeing the same behavior.

Component.html: <ngx-audio-player [playlist]="msaapPlaylist" [displayTitle]="msaapDisplayTitle" [autoPlay]="msaapAutoPlay" muted="muted" [displayPlaylist]="msaapDisplayPlayList" [pageSizeOptions]="msaapPageSizeOptions" [displayArtist]="msaapDisplayArtist" [displayDuration]="msaapDisplayDuration" [expanded]="msaapExpanded" (trackEnded)="onEnded($event)" [displayVolumeControls]="msaapDisplayVolumeControls" [displayRepeatControls]="msaapDisplayRepeatControls" [disablePositionSlider]="msaapDisablePositionSlider"> </ngx-audio-player>

Component.ts

import { Component, OnInit } from '@angular/core';
import { Track } from 'ngx-audio-player';

@Component({
  selector: 'app-stream-player',
  templateUrl: './stream-player.component.html',
  styleUrls: ['./stream-player.component.css']
})

export class StreamPlayerComponent implements OnInit {

  msaapDisplayTitle = false;
  msaapDisplayPlayList = false;
  msaapPageSizeOptions = [10];
  msaapDisplayVolumeControls = true;
  msaapDisplayRepeatControls = false;
  msaapDisplayArtist = false;
  msaapDisplayDuration = false;
  msaapDisablePositionSlider = true;
  msaapExpanded = false;
  msaapAutoPlay = false;

  // Material Style Advance Audio Player Playlist
  msaapPlaylist: Track[] = [
  {
      title: 'Live Stream',
      link: 'http://localhost:9001/default.mp3',
      duration: 0,
  },
  ];

  constructor() { }

  ngOnInit(): void {
  }

  onEnded(value: string){
    // nothing?
  }

}

package.json { "name": "jukebox-ui", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^12.2.10", "@angular/cdk": "^12.2.10", "@angular/common": "~12.2.10", "@angular/compiler": "~12.2.10", "@angular/core": "~12.2.10", "@angular/forms": "~12.2.10", "@angular/material": "^12.2.10", "@angular/platform-browser": "~12.2.10", "@angular/platform-browser-dynamic": "~12.2.10", "@angular/router": "~12.2.10", "ngx-audio-player": "^11.0.4", "ngx-toastr": "^13.1.0", "rxjs": "~6.6.0", "tslib": "^2.0.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/build-angular": "^12.2.10", "@angular/cli": "~12.2.10", "@angular/compiler-cli": "~12.2.10", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.3.4", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.3.5" } }

Chome 94.0.4606.81 (Windows 10)

My player looks like this: https://gyazo.com/15f2e87b10afacf034cb38c0890aab79

Notice that display Duration is false, yet, its trying to display the duration. Also Volume Controls is true, but I have no volume controls.

The stream source is an IceCast2 server. Audio plays fine.

This might be because of Angular 12.2.10?

[vmudigal]

Fixed in v12.0.1