Hello,
Im setting up a record label store to sell Vinyl / CD's etc, as well as Digital MP3 downloads and Need to include audio preview with an mp3 player for multiple tracks per product. I searched the forums and saw mention of a Music Store Extention that seems to no longer exist in the extention area on the opencart website.
Does anyone know if this or a similar module exists? or if anyone has any ideas about how to accomplish this another way?
Joe
Just thought id follow this up with the solution that i came up with.
I was able to integrate audio.js into the product template and use product attributes to feed in the track name / url to audio.js. works pretty well.
check out the implementation here: http://goo.gl/8Gxff
I was able to integrate audio.js into the product template and use product attributes to feed in the track name / url to audio.js. works pretty well.
check out the implementation here: http://goo.gl/8Gxff
Very nice site!!! Hello everybody and Happy New Year!!! Please, tell me how did you do this??? I need your help because I want to start selling mp3 into my site. We have a music productions company and we are selling our physical cds’. By PayPal or “Cash on delivery” method. I’m trying to organize it but I’m confused... Cannot find any extension suitable for my site. And I saw your page.... That’s it!!! How did you do that? Is another template except the default you use??? Thank you...
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):
In your product .tpl, put this where you want it to appear.
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.
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>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 ?>
Who is online
Users browsing this forum: No registered users and 6 guests
