wpaudio as standalone

By | July 13, 2011
Share

Hey guys!

I have been using the great WPaudio plugin for different WordPress web projects. Now I’m working on a PHP/HTML web site, and so I was looking at using the great WPaudio player as a standalone player for that site too.

It was actually quite easy to do this, here is what you need to do:

1. You need the plugin files, download the plugin here.

2. If the following sounds hard, skip this step. The plugin uses jQuery, You can use one of the publicly hosted ones (I use the Google API one), but you can also download jQuery here. (it doesn’t seem to work with latest jQ (1.6.2) so I use the 1.4.4 one).

3. Insert the three <script> tags in the HTML (shown below)

4. All links to mp3-files will now be converted to players! Yay!

Example here, look at the html here. The ugly colors are for identifying what color goes where. You can change them to whatever you like in the “style” attrib.

This example needs the “wpaudio-mp3-player” folder to be in the same dir as the html file.

Here is the code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>test | wpaudio</title>

<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js’></script>

<script type=’text/javascript’>/* <![CDATA[ */ var _wpaudio = {url: ‘wpaudio-mp3-player’, enc: {}, convert_mp3_links: true, style: {text_font:’Sans-serif’, text_size:’18px’, text_weight:’normal’, text_letter_spacing:’normal’, text_color:’inherit’, link_color:’red’, link_hover_color:’blue’, bar_base_bg:’green’, bar_load_bg:’cyan’, bar_position_bg:’magenta’, sub_color:’olive’}}; /* ]]> */</script>

</head>
<body>

<p><a href=”http://owe.ompom.se/data/musik/Orientexpressen%20-%20Nattritt.mp3″>Orientexpressen &#8211; Nattritt</a></p>

<script type=’text/javascript’ src=’wpaudio-mp3-player/wpaudio.min.js?ver=3.1′></script>
</body>
</html>

Category: Uncategorized

Leave a Reply

Your email address will not be published.