Amplitude HTML Audio Player Integration

Hi all. I am trying to create a music player using the amplitude js tutorial created by @PixelGeek . The css for the player is too large for the embed component, but I can’t seem to host it using GitHub either and not sure what I am doing wrong.

Here is my code pen:

Webflow Preview Link:
https://preview.webflow.com/preview/vanilla-audio-player?utm_medium=preview_link&utm_source=designer&utm_content=vanilla-audio-player&preview=83a3d693478b0a3ca192ee48c424d0c5&pageId=62cb9d27d809bc3cc9eb50d4&itemId=62cb9d3006078f3a5db37e95&workflow=preview

In webflow I created 3 embed components one for the html, css, and javascript. I would like the player to be dynamically attached to the playlist, and I want the player be positioned sticky to the first column. Any help figuring this out would be greatly appreciated.

Why do you need to embed the html and css? The only HTML you should need an embed for is the “progress” attribute. All the other styling can be done in Webflow.

For the JS, if you want to make it dynamic, add an embed component and add the following code:

<script>
  var songsToAdd = [{
    "name": "{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}",
    "artist": "{{wf {&quot;path&quot;:&quot;client&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}",
    "album": "Key",
    "url": "{{wf {&quot;path&quot;:&quot;link-to-mp3&quot;,&quot;type&quot;:&quot;Link&quot;\} }}",
    "cover_art_url": "{{wf {&quot;path&quot;:&quot;album-image&quot;,&quot;type&quot;:&quot;ImageRef&quot;\} }}"
  }];

  Amplitude.init({
    "songs": [{
      "name": "{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}",
      "artist": "{{wf {&quot;path&quot;:&quot;client&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}",
      "album": "We Are to Answer",
      "url": "{{wf {&quot;path&quot;:&quot;link-to-mp3&quot;,&quot;type&quot;:&quot;Link&quot;\} }}",
      "cover_art_url": "{{wf {&quot;path&quot;:&quot;album-image&quot;,&quot;type&quot;:&quot;ImageRef&quot;\} }}"
    }]
  });

  document.getElementsByClassName('show-playlist')[0].addEventListener('click', function() {
    document.getElementById('white-player-playlist-container').classList.remove('slide-out-top');
    document.getElementById('white-player-playlist-container').classList.add('slide-in-top');
    document.getElementById('white-player-playlist-container').style.display = "block";
  });

  /*
    Hides the playlist
  */
  document.getElementsByClassName('close-playlist')[0].addEventListener('click', function() {
    document.getElementById('white-player-playlist-container').classList.remove('slide-in-top');
    document.getElementById('white-player-playlist-container').classList.add('slide-out-top');
    document.getElementById('white-player-playlist-container').style.display = "none";
  });

  /*
    Gets all of the add to playlist buttons so we can
    add some event listeners to actually add to playlist.
  */
  var addToPlaylistButtons = document.getElementsByClassName('add-to-playlist-button');

  for (var i = 0; i < addToPlaylistButtons.length; i++) {
    /*
      Add an event listener to the add to playlist button.
    */
    addToPlaylistButtons[i].addEventListener('click', function() {
      var songToAddIndex = this.getAttribute('song-to-add');

      /*
        Adds the song to Amplitude, appends the song to the display,
        then rebinds all of the AmplitudeJS elements.
      */
      var newIndex = Amplitude.addSong(songsToAdd[songToAddIndex]);
      appendToSongDisplay(songsToAdd[songToAddIndex], newIndex);
      Amplitude.bindNewElements();

      /*
        Removes the container that contained the add to playlist button.
      */
      var songToAddRemove = document.querySelector('.song-to-add[song-to-add="' + songToAddIndex + '"]');
      songToAddRemove.parentNode.removeChild(songToAddRemove);
    });
  }

  /*
    Appends the song to the display.
  */
  function appendToSongDisplay(song, index) {
    /*
      Grabs the playlist element we will be appending to.
    */
    var playlistElement = document.querySelector('.white-player-playlist');

    /*
      Creates the playlist song element
    */
    var playlistSong = document.createElement('div');
    playlistSong.setAttribute('class', 'white-player-playlist-song amplitude-song-container amplitude-play-pause');
    playlistSong.setAttribute('data-amplitude-song-index', index);

    /*
      Creates the playlist song image element
    */
    var playlistSongImg = document.createElement('img');
    playlistSongImg.setAttribute('src', song.cover_art_url);

    /*
      Creates the playlist song meta element
    */
    var playlistSongMeta = document.createElement('div');
    playlistSongMeta.setAttribute('class', 'playlist-song-meta');

    /*
      Creates the playlist song name element
    */
    var playlistSongName = document.createElement('span');
    playlistSongName.setAttribute('class', 'playlist-song-name');
    playlistSongName.innerHTML = song.name;

    /*
      Creates the playlist song artist album element
    */
    var playlistSongArtistAlbum = document.createElement('span');
    playlistSongArtistAlbum.setAttribute('class', 'playlist-song-artist');
    playlistSongArtistAlbum.innerHTML = song.artist + ' &bull; ' + song.album;

    /*
      Appends the name and artist album to the playlist song meta.
    */
    playlistSongMeta.appendChild(playlistSongName);
    playlistSongMeta.appendChild(playlistSongArtistAlbum);

    /*
      Appends the song image and meta to the song element
    */
    playlistSong.appendChild(playlistSongImg);
    playlistSong.appendChild(playlistSongMeta);

    /*
      Appends the song element to the playlist
    */
    playlistElement.appendChild(playlistSong);
  }

</script>

It’s hard for me to troubleshoot because I can’t publish. But I would simplify this project by designing all the html and css via Webflow instead of an embed component, then worry about the js.

1 Like

Thank you my friend! Had me stumped for days :smile: Can’t wait to use this.