How to change audio url dynamically?

[AminTaghikhani]

Hi there,

How can I change my audio source dynamically? I have a player and select, select contains the information of the files, When the user selects the file, I want to change the URL of the player.

@angular/core: "^10.0.10"
@vime/angular: "^5.0.27"

[MystiC1988]

I have the same problem, any solution? it is not clear in the documentation how to do this. regards

[AminTaghikhani]

I have the same problem, any solution? it is not clear in the documentation how to do this. regards

re-render component is my solution and it's not good. it's just painkiller.

[ivanmirandastavenuiter]

Why a library supposedly made to play video and audio do not offer the option of changing the track? Is not the most common thing in the world? Previous / Forward buttons... Have you ever seen a media player without them? I don't understand this.

[AminTaghikhani]

Why a library supposedly made to play video and audio do not offer the option of changing the track? Is not the most common thing in the world? Previous / Forward buttons... Have you ever seen a media player without them? I don't understand this.

You want to answer the question/issue or you have issue with library? I got confuse

[ivanmirandastavenuiter]

Hi Amin. Sorry for causing the confusion. I'm asking how to change a song (previous, forward buttons). I do not see how to do that in the docs. I can see methods play and pause for the main player component. But not previous and forward functions. There seem to be a mehtod called setCurrentAudioTrack which sets a track by index. The thing is that there's another property that supposedly tells you if you can or cannot set audio track (which doesn't make sense for me at all: why can't I change an audio track? It's ridiculous. And it turns out that this property returns false... Don't know why.

You can check what I'm saying here in the vime docs for player component: https://vimejs.com/components/core/player

[ivanmirandastavenuiter]

Hey @AminTaghikhani. I've found a workaround for this. At least for me. When I saw your post I thought I could access the html containing the source file for audio and change it. It wasn't working in vime because I was targeting the wrong one. Instead of the audio element itself, it seems that in vime this component depends on vm-file. If you change the src manually, audio will change successfully. I needed to pause it first, set and play at the end. Something like this:

  async onPreviousClick() {
    await this.player.pause();
    const audioElement = <HTMLSourceElement>this.audio.nativeElement;
    const vmFile = audioElement.parentElement as HTMLAudioElement;
    vmFile.src = 'assets/lp-papercut.mp3';
    await this.player.play();
  }
  

Obviously, hardcoding url is not efficient. Handling with a little simple dictionary containing indexes should be enough. Hope it helps. And if anyone knows how to set it through vime methods, please share.

[Adrii77]

Hey ! Just bind URL on [attr.data-src] from <source> element.

In my app :

<vm-audio>
   <source
     [attr.data-src]="(currentAudio$ | async).audioLink"
     type="audio/mp3" />
 </vm-audio>

 <vm-default-ui></vm-default-ui>
</vm-player>

currentAudio$ is an observable (from a BehaviorSubject in my case) which emits an object which contains an audio url (audioLink). I have a page where I can choose which sound I want to listen. Each of them contains a play button which next the audio object atfer a click.