Error loading: "undefined" when using audio.js with Opencart to display an audio playlist

im trying to integrate mp3 module into my opencart store using audio.js from . so I followed the steps mentioned in , the code was a bug, so I fixed it.

But the problem is, when loading the page, I get the following error

Error loading: "undefined"


enter image description here

when I click on a song in the playlist and click on the player the song is playing on. but it still says undefined.

in fact it should look like enter image description here

below is the header.tpl code

 <script src="/js/audiojs/audio.min.js"></script>
              $(function() {
                // Setup the player to autoplay the next track
                var a = audiojs.createAll({
                  trackEnded: function() {
                    var next = $('ol li.playing').next();
                    if (!next.length) next = $('ol li').first();
                    audio.load($('a', next).attr('data-src'));

            // Load in the first track
            var audio = a[0];
                first = $('ol a').attr('data-src');
            $('ol li').first().addClass('playing');

            // Load in a track on click
            $('ol li').click(function(e) {
              audio.load($('a', this).attr('data-src'));
            // Keyboard shortcuts
            $(document).keydown(function(e) {
              var unicode = e.charCode ? e.charCode : e.keyCode;
                 // right arrow
              if (unicode == 39) {
                var next = $('li.playing').next();
                if (!next.length) next = $('ol li').first();
                // back arrow
              } else if (unicode == 37) {
                var prev = $('li.playing').prev();
                if (!prev.length) prev = $('ol li').last();
                // spacebar
              } else if (unicode == 32) {


in product.tpl

  <?php // Start of player ?>
        <?php if ($attribute_groups) { ?>
 <?php foreach ($attribute_group['attribute'] as $attribute) { ?>
          <?php if ($attribute_group['name'] == 'Demo Tracks') { ?>

            <div class="player">
              <audio preload></audio>
                  <?php foreach ($attribute_group['attribute'] as $attribute) { ?>
                    <?php //split name
                       $track = strtok($attribute['text'],"~");
                    <?php while ($track !== false) {
                      // probably a better way, but put the 2 into diff vars
                      $track_url = $track;
                      $track = strtok('~');
                      $track_desc = $track;
                      $track = strtok('~');
                      <a href="#" data-src="<?php echo html_entity_decode($track_url); ?>"><?php echo $track_desc ?>
                    <?php } // end while ?>
                  <?php  } // end foreach?>
            <?php } //if attribute_group ?>
 <?php }  ?>
          <?php } //if attribute ?>


any help would be appreciated.


source to share

1 answer

Looking at your JS code I can see that you are only using a selector like this

$('ol li')


which will find all the elements <li>

inside the element <ol>

. While this works fine, it is very likely that there is another template in your template <ol><li>

that does not contain your playlist entries.

A quick fix for this can be achieved with an attribute class

or id

for your playlist <ol>

, so it looks like, for example <ol id="playlist">

. Then the unique selector would be

$('ol#playlist li')




All Articles