Creating MP3 Samples

DPD offers the feature of Creating Samples for MP3 Products.  This feature becomes available on your Product Detail page whenever you upload an MP3 for your product file.

To create an MP3 sample and embed it on your site:

1.  Create a product in DPD

2.   On the Fulfillments page, add a file fulfillment and upload your full MP3 track (the song, recording, etc. that you are selling to the consumer)

3.  Once you have saved the MP3 file fulfillment, the fulfillment list will display options to create your MP3 sample and, once created, to generate the sample player code:

 

 

From here, click on Create Music Sample. You'll be taken to a page that lets you pick your time frame. You can preview your MP3 file and decide on what part of the file you want to offer as a clip. Using the sliders on the left, select the part of the sound file you want to create your clip for.  You can have at most 30 seconds in your clip. Click Save when you are done.

Note:  You can create a music sample for each MP3 track you have uploaded for a product.  Each music sample corresponds to it's file delivery method, and deleting the MP3 file delivery method will remove the associated music sample.

x1oso.png

When you're ready to embed the clip in your site, click on Get Music Code. You'll be presented with a text box containing the code you need to embed your sample clip player.  Just copy the code from the box, and paste it into your site where you want the player to go.  DPD only lets you have one sample per product, so be aware that if you update your sample later, you will overwrite the sample for any existing players you have for this product.

HQWoH.png

DPD also provides some advanced options for the MP3 player that lets you control the style and behavior of your options.  In the code snippet, you'll see a div tag with an options attributes.  This attribute is JSON encoded data and it tells the player how to behave.  

The JSON data must be properly formatted for it to work. This means that the option name and the option value must be surrounded in double quotes, and each option is separated by a comma. Color values must be 6 character hex codes without a hash. Properly formatted JSON data would look like:

{
"width":"100%",
"titles":"The name of my track sample",
"loop":"yes",
"bg":"CFDE9A"
}

So, the completed options value might look like this:

options='{ "width":"100%","titles":"The name of my track sample","loop":"yes","bg":"CFDE9A"}'

 

You can update the options attribute with any of the following options:

Track Options
OptionDefaultDescription
titles overrides ID3 information comma-delimited list of titles
artists overrides ID3 information comma-delimited list of artists
 
Behavior Options
OptionDefaultDescription
autostart no if yes, player starts automatically
loop no if yes, player loops
animation yes if no, player is always open
remaining no if yes, shows remaining track time rather than ellapsed time
noinfo no if yes, disables the track information display
initialvolume 60 initial volume level (from 0 to 100)
buffer 5 buffering time in seconds
encode no indicates that the mp3 file urls are encoded
checkpolicy no tells Flash to look for a policy file when loading mp3 files
(this allows Flash to read ID3 tags from files hosted on a different domain)
rtl no switches the layout to RTL (right to left) for Hebrew and Arabic languages
 
Flash Player Options
OptionDefaultDescription
width required width of the player. e.g. 290 (290 pixels) or 100%
transparentpagebg no if yes, the player background is transparent (matches the page background)
pagebg NA player background color (set it to your page background when transparentbg is set to ‘no’)
 
Display Options
OptionDefaultDescription
bg E5E5E5 Background
leftbg CCCCCC Speaker icon/Volume control background
lefticon 333333 Speaker icon
voltrack F2F2F2 Volume track
volslider 666666 Volume slider
rightbg B4B4B4 Play/Pause button background
rightbghover 999999 Play/Pause button background (hover state)
righticon 333333 Play/Pause icon
righticonhover FFFFFF Play/Pause icon (hover state)
loader 009900 Loading bar
track FFFFFF Loading/Progress bar track backgrounds
tracker DDDDDD Progress track
border CCCCCC Progress bar border
skip 666666 Previous/Next skip buttons
text 333333 Text
Have more questions? Submit a request

Comments

  • Avatar
    Will Littlejohn

    We feature our product download links embedded directly into emails. Unfortunately with the javascript preview code, it is not possible to embed the preview option. Would it be possible to make a non-java embedded preview code so this is possible?

Powered by Zendesk