I made this work, although I am sure it could be better and made into a module or something.
All this is hard coded now, so you can read the source and change it if you want to.
First, create an attribute group named Demo Tracks
Second, create an attribute named Tracks
On your product, go to Attribute and add Tracks.
Then add your tracks like this: trackurl~trackname~trackurl~trackname the ~ is hardcoded as a delimiter, but again can be changed. Just keep adding all your tracks in the one box. You can't have more than one attribute with the same name so this is my work around.
Then in your header.tpl add your css file and javascript (I couldn't make the player work right by simply calling it from a file):
Code: Select all
<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 your product .tpl, put this where you want it to appear.
Code: Select all
<?php // Start of player ?>
<?php if ($attribute_groups) { ?>
<?php if ($attribute_group['name'] == 'Demo Tracks') { ?>
<script src="/js/audiojs/audio.min.js"></script>
<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_
<?php } // end while ?>
<?php } // end foreach?>
</ol>
</div>
<?php } //if attribute_group ?>
<?php } //if attribute ?>
That is a quick, easy, and probably buggy (if you have other attributes) way, but as I said it works, and I don't have time to mess with it anymore for a while.