Embedding Yahoo! Web player in Muse created web sites

Version 1

    This document talks about how easily you can use Muse to embed mp3 files, YouTube links and Yahoo! Movies links in your Muse created site and play them on the site.



    • What is Yahoo! Web player
    • How does it works
    • How to embed in Muse file
    • Things to remember while doing the integration
    • Detailed documents on Yahoo! Web player


    What is Yahoo! Web player


    Yahoo! Web player is an online media player that can detect automatically hyperlinks to mp3 files, YouTube and Yahoo! movies and creates playlist to be played in a player on the bottom left corner of the window. It floats on top of the web page and can be minimized or opened. This player can be customized in many ways, however, we will not get in to the details here and will only talk about basic implementation.


    How does it works


    Yahoo! Web Player automatically detects all the anchor tags that are linking mp3 file, YouTube links or Yahoo! Movie links on a page. It then pre-pends a play button in front of the anchored links. Adds the detected tracks to a playlist and displays a player to the left bottom of the page, which can be closed or opened. This is neat and easy to implement tool for your website, for those you are designing a web site that requires a player to play the tracks when on the site. This helps the rockband and similar web sites to get an online player very easily.


    How to embed in Muse file


    To Embed the player in your Muse file open the page where you want to implement the playlist. Right Click and Go to the Page Properties -> Meta data. Paste the below script to the head section.

    <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

    Then all you need to do is to add hyperlinks to the mp3 files or YouTube videos using the hyperlinks button on the control bar, Screen Shot


    Things to remember while doing the integration


    When you are creating the links to the media files using the simple text-frames the play button would be pre-pended to those which usually creates a layout issue. To over come this what I have done is that I have placed a rectangle just out side the actual text-frame that I have created to link to the media files and left some space to the left of it so that the play button can be accomodated in that space, like the below Screen Shot


    Detailed documents on Yahoo! Web player


    Yahoo! Web player can be customized in many ways to manage the playlist, change the skins, autoplay or not and various other functions, for a detailed list and documentation on the same please refer to official Yahoo! Web player's web site here, http://webplayer.yahoo.com/


    See this working here, https://muse4test.worldsecuresystems.com/music.html