Audio Player Wordpress Plugin Wizard

Background:

In my another blog www.cage1016.blogspot.com. I wrote a post about a mobile answer tone 別別掛. The point is i found many audio(mp3) players that i can embed mp3 in my blog easily. Final, i found a post Inline Mp3 Player(WordPress version) and talk about a simple inline audio player. It's Audio Player Wordpress plugin. The audio player support you can setting simple options to change the look of palyer. for example: background color, Text color, enable auotplay and enable loop play.

<object id="audioplayer1" height="24" width="290" data="http://cage.chung.googlepages.com/player.swf" type="application/x-shockwave-flash">
<param value="http://cage.chung.googlepages.com/player.swf" name="movie"/>
<param value="playerID=2&bg=0xCDDFF3&leftbg=0x357DCE&lefticon=0xF2F2F2&rightbg=0xF06A51&rightbghover=0xAF2910&righticon=0xF2F2F2&righticonhover=0xFFFFFF&text=0x357DCE&slider=0x357DCE&track=0xFFFFFF&border=0xFFFFFF&loader=0xAF2910&soundFile=xxxx" name="FlashVars"/>
<param value="high" name="quality"/>
<param value="false" name="menu"/>
<param value="#FFFFFF" name="bgcolor"/>
</object>

Above code is the audio player plugin syntax. we can see that there are few options are relative to Color bg, leftbg etc. It's a little difficult to setting these color to product a beautiful look. Or if you don't real understand the html color hex code. I think that the best way is you can change the option color directly. And few ago, when i studied Google Static Map API. In button of Static Maps API Developer's Guide has a firendly wizard(Goolge Static Map Wizard) support a simple UI-dirven way to generate static maps via a simple UI interface.

So, i wirte some javascript to support a similar simple UI-dirven way to generate Audio Player Wordpress Plugin. Just 3 steps and few settings. You can get the beautiful audio player.

Explain:

The Audio Player WordPress Plugin Wizard is Google style like. Build All by whole javascript and use excellent sliders are courtesy of Erik Arvidsson over at WebFX. The simple UI-dirven way let you can build your player look easily and only 3 steps.

Audio Player Color Schema:

As you can see. There are 9 color you can change.

Step1: Customize your audio player setting

First, you have 3 things to do. Choose the Audio Player Plugin play.swf url and choose the auido file url you want to embed in your blog (This 2 items have default, if you want test first and don't mind it). Then, there are 3 color schema patten. Choose one and you will see the colors bind to table of step2.

Step2: Customize audio player options of colors, autoplay and loop

After the color schema binded. I set autoplay and loop field are ture. If the player url and audio file url are current. Now you will listen to the music. In this step, you can change the color of palyer you want. Click the ratio button of option column. The color picker will be setting to equal the option color you click. You can change the color by darp the red, green and blue or type the html color hex code directly. The player will update if you any change the color, autoplay, loop setting and.

step3:Generate audio player embed code

Now, you can copy this code to embed in you blog.

enjoying~~~

Audio Player Wordpress Plugin Wizard click here ←←

Read More

Feed media:thumbnail Item

In my early two posts(I,II). I talk about Blogger in Draft new features, the Geotagging. There are many blogger discuss the new feature in comments of New feature: Geotagging by Blogger In Draft. Now, maybe you don't understand that this post i will talk about feed item and why i will remind it.

If you had read the post of blogger draft new feature. You will notice that the author offer a Gagdet(here). It's add a google map in you blogger that parser feed georss:point data of your post feed. And i found Blogger Developers Network announced a feature about media:thumbnail(here). It's talk about you can get a 72x72 pixel image in your feed if you add first image in your post. Those give me a idea. I modify my blog template that just list the post if you click the older post link in the footer of blog.

<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <!-- Show article title only -->
    <div class='thumbnail_'>
        <table>
            <tr>
                <td>
                    <script expr:src='&quot;/feeds/posts/default/&quot; + data:post.id + &quot;?alt=json-in-script&amp;callback=GetThumbnail&quot;'
                    type='text/javascript'>
                    </script>
                </td>
                <td>
                    <h3 class='post-title' id='list-title'>
                        <a expr:href='data:post.url'>
                            <data:post.title/>
                        </a>
                        <h2 class='date-header'>
                            <data:post.dateHeader/>
                        </h2>
                    </h3>
                </td>
            </tr>
        </table>
    </div>
    <b:else/>
    <b:include data='post' name='post' />
</b:if>

function GetThumbnail(json) {
    var url = (typeof(json.entry.media$thumbnail) != 'undefined') ? json.entry.media$thumbnail.url : " & quot;
    if (url.length & gt; 0) document.write('<img src=\"' + url + '\"/>');
    else document.write('<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsPeUmlIKKTCkO4u4w42SdR4ph9rwh6IgI53ESBC232pBzD8nlNbOZdUk-P5KtJh73TLP_fRMU_HR3CIY-vNDYriqFSfX2un2HH-mKa_w-iChRdLCYoCU3n0rbEPcfOOHMPdyxMxIkQyc4/" />');
}

The above code. javascript code pass one feed by pass data:post.id and execute callback functionGetThumbnail to write the image url.

---

get your blogger thumbnail←←

Read More