Music Player Component

Design help Custom code
1

Hey everyone!

I’ve been working on a music player using the Amplitude open-source player for a friend’s portfolio. The one final snag is my struggle to target the correct attribute, which is keeping it from being completed.

It is supposed to be a single-song player embed, but I want multiple embeds on the same page.

To allow this to work, I’m grabbing the URL value added from the Component Field, which can be changed for each component, and feeding it into the URL field in the custom code. I had been hoping it would be as easy as it is with collections where you insert a value, but it’s proving to be more complicated.

A solution I’m working on involves custom attributes since attributes can be set to use the property of the component field.

I’ve tried grabbing the parent of the embed code to see if that would work, but that doesn’t seem to be quiet right. Any help would be appreciated.

<script>

    // Wait for the DOM to be fully loaded
    document.addEventListener("DOMContentLoaded", function() {
        // Select all elements with class music_player_info
        var embeds = document.querySelectorAll('.music_player_info');

        // Loop through each element with class music_player_info
        embeds.forEach(function(embed) {
            // Check if the element is a child of an element with class .music_player
            var musicPlayerParent = embed.closest('.music_player');

            // Check if the parent element with class .music_player exists
            if (musicPlayerParent) {
                // Grab the value of the "url" attribute
                var url = embed.getAttribute('url');
                
                // Log the URL to the console
                // console.log("URL attribute value:", url);
            }
        });
    });

Amplitude.init({
    "bindings": {
      37: 'prev',
      39: 'next',
      32: 'play_pause'
    },
    "songs": [
      {
        "name": "Risin' High (feat Raashan Ahmad)",
        "artist": "Ancient Astronauts",
        "album": "We Are to Answer",
        "url": url,
        "cover_art_url": "https://521dimensions.com/img/open-source/amplitudejs/album-art/we-are-to-answer.jpg"
      }
    ]
  });

  window.onkeydown = function(e) {
      return !(e.keyCode == 32);
  };

  /*
    Handles a click on the song played progress bar.
  */
  document.getElementById('song-played-progress').addEventListener('click', function( e ){
    var offset = this.getBoundingClientRect();
    var x = e.pageX - offset.left;

    Amplitude.setSongPlayedPercentage( ( parseFloat( x ) / parseFloat( this.offsetWidth) ) * 100 );
  });
  
  </script>

p.s. - hoping to make this into a sharable webflow component.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi,
Here’s how you can modify your code to achieve this:

document.addEventListener(“DOMContentLoaded”, function() {
// Select all elements with class music_player_info
var embeds = document.querySelectorAll(‘.music_player_info’);

// Loop through each element with class music_player_info
embeds.forEach(function(embed) {
    // Grab the value of the "data-url" attribute
    var url = embed.getAttribute('data-url');
    
    // Initialize Amplitude for this song
    Amplitude.init({
        "songs": [{
            "name": "Song Name",
            "artist": "Artist Name",
            "album": "Album Name",
            "url": url,
            "cover_art_url": "Cover Art URL"
        }]
    });
});

});

// Disable spacebar from triggering page scroll
window.onkeydown = function(e) {
return !(e.keyCode == 32);
};

// Handles a click on the song played progress bar
document.getElementById(‘song-played-progress’).addEventListener(‘click’, function( e ){
var offset = this.getBoundingClientRect();
var x = e.pageX - offset.left;

Amplitude.setSongPlayedPercentage( ( parseFloat( x ) / parseFloat( this.offsetWidth) ) * 100 );

});

This setup should allow you to have multiple instances of the music player on the same page, each playing a different song.

If you have any other question please Email me at sofiachoudhry9@gmail.com

Best regards

Sofia Choudhry
Email- Sofiachoudhry9@gmail.com.
Linkedin-https://www.linkedin.com/in/sofia-choudhry-shopify-certified-expert-1a6b49216/

1 Like
3

Hi Sofia!

Thanks so much for taking the time to give me this response. For some reason, though, this solution doesn’t seem to work. I went through the code and made sure that my attribute was in the right place and with the correct title as well as anything else that might have been off.

I’ve reverted the code back to how I had it for now as I keep looking for a solution. This might be more a Amplitude code issue.

Thanks!