Installing the 1pixel Out audio flash player

[Joss]

Thought this might be useful for anyone who wants to insert audio into their product descriptions and is having a losing battle with the flash player in TinyMCE

1. Go get the standalone player from 1 pixel out - this is the player that a lot of people use as a plugin to Wordpress:

http://wpaudioplayer.com/download

2. create a directory in the root of your shop - let us call it audio_files (well, why not?)

3. Follow the instructions given on the site and upload the two files into your new audio_files directory:

http://wpaudioplayer.com/standalone

4. Edit header.tpl in your themes directory.

You need to add the javascript references. I added them at the bottom of the existing references just after the hotkeys script entry. (line 31 on mine)

NB: removed = script

       [
       [removed]  
              AudioPlayer.setup("{$content_dir}audio_files/player.swf", {ldelim}
              width: 290 
              {rdelim} );  
           [removed]

Note the use of {ldelim} and {rdelim} - this is because smarty will get messed up by the curly brackets otherwise. Obviously, change the audio_files reference if you have put them somewhere else!

5. Embed the code into your page.

I put my player in the main description, not the short one, but as long as you make sure each one has a unique ID, you can have several on a page. However, make sure you have autostart off! I uploaded my audio files into the same directory as the scripts.

This is the code for a single insertion:

Sorry, you don't appear to have Flash. Install Flash to see the audio player.


// <![CDATA[

   AudioPlayer.embed("audioplayer_1", {  
       soundFile: "/audio_files/my-big-hit.mp3", 
       titles: "My wonderful big hit",  
       artists: "21st Century Blues",  
       autostart: "no",
       width: 290
   });
// ]]>[/removed]

The 1 pixel out site also has examples of using a single player to play multiple files plus other variables you can define including customising the colour.

Note, since this player expands out to the right, it needs to be on a discreet line!

There may be a better way to do this, but since I could not get the built in flash player to work, nor could I find anyone who knew how to make it work, this was my solution. It is a little fiddly, but once set up, just coy and paste the above bit of script and change as required.

You can see how we have used it on our site:

Crimson Cats Audio Books

Note:

This player works neatly in a table if you want a list of songs rather than have one player play all tracks. However, make sure you have enough column width so the table is not distorted when a player is started.

You can see that working on my music site (not a prestashop):

http://www.21stcenturyblues.co.uk/songs.php



Good luck!


PS: If you have problems with the player, contact 1 pixel out, not me!!!!

[adamus007p]

Joss thank you for description, I don't understand your instruction. Could you give some example or explain little details?

 

Thank you

[MEG Venture]

Try this. It comes as a module with full functionalities:

 

http://addons.prestashop.com/en/front-office-features/4990-audio-player.html

[www.dressmeglam.com]

Joss thank you for description, I don't understand your instruction. Could you give some example or explain little details? Thank you

 

i'll try to make it easier abit...ps where you see (here<) you need to place an < there and vise versa with (>here) to close the tag

 

When you edit your header.tpl file, from the top look to where the last (here<)/ script(>here) is located and then place this code directly under it

 

 

(here<)script type="text/javascript" src="{$content_dir}audio_files/audio-player.js">(here<)/script(>here)

(here<)script type="text/javascript"(>here)

AudioPlayer.setup("{$content_dir}audio_files/player.swf", {ldelim}

width: 221, initialvolume: 50,

{rdelim} );

(here<)/script(>here)

 

then go to where you want the player to be placed and place this code (I named my player glam, and my tune song.mp3

 

 

(here<)div id="glam"(>here) (here<)script="" type="text/javascript"(>here)

// <!--[CDATA[

 

AudioPlayer.embed("glam", {

soundFile: "/audio_files/song.mp3",

titles: "Glam",

artists: "Christina Aguilera",

autostart: "no",

width: 221

});

// ]]-->

(here<)/script(>here)

(here<)/div(>here)

 

Hope that helps abit </here)>

Edited October 5, 2012 by rayyis (see edit history)