Waveform is not showing for dynamic added songs

🌎 Our Open Source Projects AmplitudeJS
1

Hello,

I have just integrated Amplitude(5.0.3). Everything works as expected if I have song list and then initialize the plugin. But when I initialize plugin with empty song list and try to load/add song dynamically with ajax load/button click on some element, I can’t see the waveform. As instructed, I am doing Amplitude.bindNewElements() and the play button responding to the index for the song but the below markup does not show the waveform for the dynamic added song.

Frontend Markup:

<div class="audio-embed" data-audio-embed-url="<?php echo $audioUrl; ?>">
   <div class="play-button-wrapper">
       <button type="button" data-amplitude-song-index="" class="amplitude-play-pause amplitude-paused"></button>
   </div>
   <div class="navigation-wrapper">
         <div class="track-wrapper">
                <div class="amplitude-wave-form" data-amplitude-song-index=""></div>
                <progress class="amplitude-song-played-progress" data-amplitude-song-index=""></progress>
                <input type="range" class="amplitude-song-slider" data-amplitude-song-index="">
          </div>
   </div>
</div>

JS:

Amplitude.init({
    songs: [{url: ''}],
    preload: 'auto',
    waveforms: {
        sample_rate: 100
    }
});

After some custom event below function get called to load song dynamically:
addSongToPlaylist (e) {
    const [song, $element] = e.getData(),
        songIndex = Amplitude.addSong(song);

    $element.find('[data-amplitude-song-index]').attr('data-amplitude-song-index', songIndex);
    Amplitude.bindNewElements();
}

How can I show song info like start time, end time and the waveform when song is added and update dom.

2

Hi @naim08,

Just so I’m clear, when you add a new song to AmplitudeJS using Amplitude.addSong(song) and then bind the elements with Amplitude.bindNewElements() none of the information shows up?

The waveforms, I could see being an issue. I need to update the library to dynamically re-render the waveforms. With the song length, that’d be the same issue as waveforms since it needs to load the song before Amplitude can find the end time. Are any of the other meta data pieces not showing up (song name, artist, etc)?

3

Hi @danpastori,

Thank you for such quick response. Right now I am only working with the wave form, progress time and duration/end time. I do not need other meta info for my purpose. As you have mentioned, all this 3 value is not loaded if a song get loaded dynamically. I can share the player with static song that I have built but I need to build it dynamically as the songs are coming from server with ajax request. Do you have a timeframe in mind about when we can have the update?

audio
audio1117×259 54 KB

4

If you could share a link with your player, I can determine if this is an issue that will be resolved in 5.3 (https://github.com/521dimensions/amplitudejs/projects/16) or if it’s a separate bug. We are working on 5.3 but it’s taking much longer than expected with some of the breaking events when we refresh the audio.

5

If i may come in, they is a workaround for that create an empty array,make an ajax request and push your songs into that array then pass that array as your song. That should fix that,i did a player that am passing my songs through ajax and it work fine

6

Thanks @samueldan for the work around!

1 Like
7

Thank you both for replying. Very sorry for my late response. I have tried with pushing song to the array and songs plays as expected but unfortunately the wave and time meta info was not showing. At this moment I can not share this as for my legal obligation. I have convinced my customer to provide a song list on page load and not on every slide load by ajax request. I will definitely give my old concept a try with whenever the updated library get released. Thanks a lot.

8

This bug has been confirmed and is being tracked: Generate Waveforms Efficiently · Issue #462 · serversideup/amplitudejs · GitHub