Hi to All

I’m searching a solution to play an audio file via Howler.js in a Ionic Project with HTML5 flag true. The problem is in update a seek bar that I’ve created. Reading the documentation I’ve founded that exist an option “preload” setting that to ‘metadata’ allows to download file metadata (even duration of the file), i’ve tried to use this option but without result, this is the sample code of the use of howler:

ngOnInit() {
this.idTrack = this.player = new Howl({
src: [‘ https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3 ’],
html5: true,
format: [‘mp3’],
preload: ‘metadata’,
onplay: () => {
this.updateProgress();
onend: () => {
this.buttonIcon = “play”;

There is any Suggestion to make this solution working?

Thanks in advance

So I’ve just done a project with this library too. It works fine.

However, not all files are seekable, it depends on the file encoding.

If you read the ExoPlayer documentation, which I used for my Android implementation, it explains this:

https://exoplayer.dev/troubleshooting.html#why-are-some-media-files-not-seekable

Well, I didn’t do anything special to set it up, here’s some snippets of my plugin:

Note: you’ll obviously have to replace parameters with however you’ve done it.

Setup:

        this.howl = new Howl({
          src: [options.url],
          html5: true,
          preload: true,
          onend: () => {
            this.playbackEnded = true;
Seek:
  async seek(options: { milliseconds: number }): Promise<void> {
    this.log("seek", options);
    this.howl.seek(options.milliseconds / 1000);
    return;
              
Can you say me what version of Howler did you used in your project?
I used the 2.1.2 version i didn’t know there was a seek properties, and i implemented the seek bar in the following manner:
ngOnInit() {

this.idTrack = this.player = new Howl({

src: [this.tracksource],

html5: true,

preload: ‘metadata’

format: [‘mp3’],

onplay: () => {

this.updateProgress();

onend: () => {

this.buttonIcon = “play”;

playPauseGuide(){

if (this.player.playing()){

this.player.pause();

this.buttonIcon = ‘play’;

else{

this.player.play();

this.buttonIcon = ‘pause’;

seek(){

console.log("progress: "+this.progress)

console.log("duration: "+ this.player.duration(this.idTrack));

let duration = this.player.duration(this.idTrack);

console.log("new position: "+((this.progress * duration)/100));

this.player.seek(((this.progress * duration)/100));

updateProgress(){

let seekValue = this.player.seek();

this.progress = (seekValue / this.player.duration(this.idTrack)) * 100 || 0;

setTimeout(() => {

this.updateProgress();

}, 1000);

While the html page is as follow:
> <ion-footer>
>     <ion-card-subtitle style="text-align: center; margin-top: 2%;">File Audio</ion-card-subtitle>
>     <ion-row nowrap style="padding-left: 2%; padding-right: 5%; margin-bottom: 2%;">
>       <ion-button fill="clear" style="margin-top: 10px;"  (click)="playPauseGuide()">
>         <ion-icon slot="icon-only" name="{{buttonIcon}}"></ion-icon>
>       </ion-button>
>       <ion-range max="100" style="width: 80%;" [(ngModel)]="progress" (touchend)="seek()" mouseup="seek()">
>       </ion-range>
>   </ion-row>
> </ion-footer>
              
Furthermore there is an audio source that work with html5=true only on phisical device the first that i’ve published, that is:
https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3
but there are other audio source that not working neither on phisical device neither on virtual device
Then I ask you there is some particular configuration on the server from which the audio stream is realised?
              
I just tested your link with my code, works absolutely fine and the seek is working fine.  There’s nothing wrong with your file.
I would suggest that you redo your player code, starting from basic until it breaks, then you will find the issue.