How to show audio waweform from api response

Question

I'm working on a custom audio player interface. I'm using vue to manage all the data stuff and bootstrap for the UI. I'm using an to have a nice to control the audio and I'm starting or stopping play using a dedicated method and the HTML5 Audio api.

I would ask two small things that I'm trying to modify/implement:

I'm gettint my data from the hearthis.at api. They provide a stream url that will work well in the Audio api, so I'm able to reproduce the audio. They also have two fields in their rest API that are waweform_data and waweform_url. The waweform_data is a link that will give a javascript file as output and the url is like this https://hearthis.at/_/wave_data/9135347/3000_c691d4fd223ab0ef89f30ee808492aa1.mp3_1595321827.js The second one, waweform_url is a link to the waweform image https://hearthis.at/_/cache/waveform_mask/4/9/4968421.png ,is there any way to use these two fields to have a waweform instead of the seekbar to show the user the audio progress and let control it like soundcloud? if not, how I can style the seekbar? I see that there is no particular class or style I can apply, I'm not a front-end guy so maybe there is something more I don't know about.

the seekbar is controlled in this way inside a method:

    initSeekBar() {
      var seekbar = document.getElementById("seek"); 
      if( !this.audio.paused ){
        seekbar.max = this.audio.duration;
        seekbar.onchange = () => this.audio.currentTime = seekbar.value;
        this.audio.ontimeupdate = () => seekbar.value = this.audio.currentTime;
      }
    }

and this is the relative markup:

The second thing where I need a bit of help is with the track duration. I get a response from the api in a field called duration: "4504" I think it's in milliseconds. I have a method that can parse it to show minutes and seconds. Since I'm implementing the seekbar and I'm using the audio.duration to update it's max value seekbar.max = this.audio.duration;, how I can subrtact the elasped time from the total duration?

NB: if I log the audio.duration it will give me a float like: 4504.11102, this will not work with the current function I have to convert milliseconds

method to parse milliseconds to minutes and seconds

    setTrackDuration(millis) {
       var minutes = Math.floor(millis / 60000);
       var seconds = ((millis % 60000) / 1000).toFixed(0);
       return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
    }

Thanks for the help.

How to show audio waweform from api response

0 Answers