Installing Amplitude.js on Joomla

[NesteA88]

Good day!

Version Amplitude.js - 4.0.0

Installation instructions studied. I'm trying to install the player on Joomla by the third method - manual installation (while on the local server). What am I doing wrong?

I downloaded Amplitude.js from GitHub. The amplitude.js file added to the </ head> area - <script type="text/javascript" src="/js/amplitude.js"> </ script>. In the place of the site where I want to see the player, I initialize its output:

<script type="text/javascript"> Amplitude.init({ "songs": [ { "name": "Song Name 1", "artist": "Artist Name", "album": "Album Name", "url": "/song/url.mp3", "cover_art_url": "/cover/art/url.jpg" }, { "name": "Song Name 2", "artist": "Artist Name", "album": "Album Name", "url": "/song/url.mp3", "cover_art_url": "/cover/art/url.jpg" }, { "name": "Song Name 3", "artist": "Artist Name", "album": "Album Name", "url": "/song/url.mp3", "cover_art_url": "/cover/art/url.jpg" } ] }); </script>

Result: the player does not even appear. In the console, such a picture - https://prnt.sc/meo2ix

[danpastori]

Hi @NesteA88 ,

Which player interface are you trying to use? You will have to have the player mark up on the page for it to appear. The init function simply binds the elements to an interaction and tells AmplitudeJS how to interact with your player. Everything you have seems to be set up correctly.

[NesteA88]

Good day!

I want to install a player with a playlist.

What do your words mean: "it is Necessary to mark the player on the page to make it appear"?

From the archive that I download from GitHub, I only need the file " amplitude.js" or any other files and folders need to be added to the site?

[danpastori]

@NesteA88 So you will need AmplitudeJS included on your page and you will need the HTML of the player that you wish to use. When I looked at the screenshot, it looks as if AmplitudeJS was configured correctly, but nothing was being bound to it. Do you have a public facing link with the code available?

[NesteA88]

Good day!

I have created the page you are trying to add player - https://armymusic.ru/pesni-pro-pv.html.

At this point it should be player - http://prnt.sc/mli34d.

It still does not appear. Something else needs to be added, but I don't know what it is.

[danpastori]

Hi @NesteA88,

So you need to add the actual HTML to the page. AmplitudeJS just activates the HTML on init. So with your player, you have to add the HTML and with all of your songs and then run Amplitude.init(); Right now I don't see the HTML appearing in your page. Let me know how that works!

[NesteA88]

Dan, good day!

I have already understood that it is necessary to add HTML-construction. But I can't figure out what she's supposed to look like! Can you use at least one song as an example to show what the HTML code will look like?

[danpastori]

Ahh, gotcha! So for a single song, you could do something like this:

<div class="grid-x grid-padding-x">
      <div class="large-12 medium-12 small-12 cell">
        <div id="single-song-player">
          <img data-amplitude-song-info="cover_art_url"/>
          <div class="bottom-container">
            <progress class="amplitude-song-played-progress" id="song-played-progress"></progress>

            <div class="time-container">
              <span class="current-time">
                <span class="amplitude-current-minutes"></span>:<span class="amplitude-current-seconds"></span>
              </span>
              <span class="duration">
                <span class="amplitude-duration-minutes"></span>:<span class="amplitude-duration-seconds"></span>
              </span>
            </div>

            <div class="control-container">
              <div class="amplitude-play-pause" id="play-pause"></div>
              <div class="meta-container">
                <span data-amplitude-song-info="name" class="song-name"></span>
                <span data-amplitude-song-info="artist"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

This is a fully functioning HTML markup for AmplitudeJS. You can activate it with the script:

    <script type="text/javascript">
      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": "../songs/Ancient Astronauts - Risin' High (feat Raashan Ahmad).mp3",
            "cover_art_url": "../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>

I have some more JS in there than the necessary just for a few features custom to the player. Hope that helps! You can find more examples here of tons of different types of players: https://github.com/521dimensions/amplitudejs/tree/master/examples

[danpastori]

Hi @NesteA88 Did this help solve the problem? If so I'll close the issue.

[NesteA88]

Yes! Thank you!