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 http://kolber.github.io/audiojs/demos/test6.html . so I followed the steps mentioned in http://forum.opencart.com/viewtopic.php?t=80116&p=372808 , 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"
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
below is the header.tpl code
<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>
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>
<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 ?>
any help would be appreciated.
source to share
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')
source to share