Ошибка загрузки: "undefined" при использовании audio.js с Opencart для отображения списка воспроизведения аудио

Question

Я пытаюсь интегрировать mp3-модуль в мой магазин OpenCart, используя audio.js с http://kolber.github.io/audiojs/demos/test6.html. поэтому я выполнил шаги, упомянутые в http://forum.opencart.com/viewtopic.php?t=80116&p=372808 код был ошибочным, поэтому я исправил его.

Но проблема в том, что когда я загружаю страницу, я получаю ошибку ниже

Error loading: "undefined"

когда я нажимаю на песню в плейлисте и нажимаю на плеер, он воспроизводит песню. но это все еще говорит неопределенное.

это на самом деле должно быть как

ниже приведен код header.tpl

 <script src="/js/audiojs/audio.min.js"></script>
       <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();
                    next.addClass('playing').siblings().removeClass('playing');
                    audio.load($('a', next).attr('data-src'));
                    audio.play();
                  }
                });

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

            // Load in a track on click
            $('ol li').click(function(e) {
              e.preventDefault();
              $(this).addClass('playing').siblings().removeClass('playing');
              audio.load($('a', this).attr('data-src'));
              audio.play();
            });
            // 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();
                next.click();
                // back arrow
              } else if (unicode == 37) {
                var prev = $('li.playing').prev();
                if (!prev.length) prev = $('ol li').last();
                prev.click();
                // spacebar
              } else if (unicode == 32) {
                audio.playPause();
              }
            })
          });
        </script>

в 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>
                <ol>
                  <?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('~');
                    ?>.
                    <li>
                      <a href="#" data-src="<?php echo html_entity_decode($track_url); ?>"><?php echo $track_desc ?>
                    <?php } // end while ?>
                  <?php  } // end foreach?>
                </ol>
              </div>
            <?php } //if attribute_group ?>
 <?php }  ?>
          <?php } //if attribute ?>

любая помощь будет оценена.

Answer 1

Глядя на ваш код JS, я вижу, что вы используете только такой селектор

$('ol li')

который собирается найти все <li> элементы внутри <ol> элемент. Хотя обычно это должно работать нормально, весьма вероятно, что в вашем шаблоне есть другой <ol><li> который не содержит записи вашего плейлиста.

Быстрое решение этой проблемы может быть достигнуто с помощью class или же id атрибут для вашего плейлиста <ol>так выглядит, например, <ol id="playlist">, Тогда уникальный селектор будет

$('ol#playlist li')