Create A Music Playlist for Windows Media Player At Your Webpage

Download Playlist_Source.zip - 1.83 KB

Introduction

This article will help you to create a music playlist at your webpage and change the running song accordingly on embedded media player. + Embedding a Windows Media Player using JavaScript. You'll embed windows media player with a new filepath fetched from database (using cookies), each time when a new song title has been clicked at playlist.

First Create Some Database Stuff

Create a table in master database (or any other database, relevent to connection string you are using) like this…

create table medPL(sid int identity(1,1), sname varchar(20), surl varchar(100))

Now insert song titles and urls like this…

insert into medPL (sname,surl) values ('Mr. Lonely','c:\lonely.mpg')

Make sure that you provided correct path and file name and type.

Now You Can Try By Using Downloads

Download .ZIP file, extract two pages (Default.aspx, Default.aspx.cs). Create a new website in VS using Visual C# at codebehind. Delete the existing Default.aspx page from your site. Now, right click the project and add existing item – which are your downloaded pages. Run and enjoy...

How The Process Go On

• You will create a GridView, where your Playlist will be shown using DataTextField sname in your table. (e.g. Mr. Lonely).
• This Playlist will be of type Hyperlink.
• Everytime you click an item, it will navigate to same page but with a querystring. This querystring will have value of song id.
• Using another SqlDataSource tag you’ll get the song url for that id.
• On Page Load, you will create a cookie and give that the value as song url.
• Now, You will embed your media player using JavaScript code and after fetching the cookie value, you’ll provide that to filename parameter of object tag.

This process will be repeated each time you will click a new song.

Code Blocks For .ASPX Page

Creating your playlist, using Grid HyperLinkField

<div>
     <asp:GridView ID="grdMPL" AutoGenerateColumns="false" DataSourceID="dsMedPL" runat="server">
      <Columns>
         <asp:HyperLinkField
              HeaderText="Playlist"
              DataTextField="sname" 
              DataNavigateUrlFields="sid"
              DataNavigateUrlFormatString="Default.aspx?sid={0}"/>                     
      </Columns>
   </asp:GridView>
   <asp:SqlDataSource ID="dsMedPL" ConnectionString="server=.;database=master;uid=sa;pwd=sa" 
              SelectCommand="select sid,sname from medPL"
              runat="server">        
   </asp:SqlDataSource>
</div>

Reserving the Place for Media Player using html division

<div id="divPlayer"></div>

Fetch the Song URL, that is been selected from playlist. Using QueryString Value. Now see Page_Load function at codebehind

<asp:SqlDataSource 
     id="dsSelURL" 
     ConnectionString="server=.;database=master;uid=sa;pwd=sa"
     SelectCommand="select surl from medPL where sid=@sid"
     Runat="server">
     <SelectParameters>
          <asp:QueryStringParameter Name="sid" QueryStringField="sid" />
     </SelectParameters>
</asp:SqlDataSource>

Request Cookie Value, Embed Media Player using JavaScript Code

    <script type="text/javascript">
        function getCookieValue()
        {
           var cookieValue = document.cookie;
           var cookieStartsAt = cookieValue.indexOf(" " + "songURL" + "=");
           if (cookieStartsAt == -1)
           {
              cookieStartsAt = cookieValue.indexOf("songURL" + "=");
           }
           if (cookieStartsAt == -1)
           {
              cookieValue = null;
           }
           else
           {
              cookieStartsAt = cookieValue.indexOf("=", cookieStartsAt) + 1;
              var cookieEndsAt = cookieValue.indexOf(";", cookieStartsAt);
              if (cookieEndsAt == -1)
              {
                 cookieEndsAt = cookieValue.length;
              }
              cookieValue = unescape(cookieValue.substring(cookieStartsAt,
                 cookieEndsAt));
           }
           return cookieValue;
        }
        document.getElementById('divPlayer').innerHTML='<object id="mediaPlayer" height="300" width="300" classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" visible="true">+ getCookieValue() + '"/></object>';
    </script>

Code Block For .ASPX.CS Page

    protected void Page_Load(object sender, EventArgs e)
    {
        //Accessing the selected song URL
        GridView grd = new GridView();
        grd.DataSource = dsSelURL;
        grd.DataBind();

        //Creating a Cookie by giving this the value of Selected Song URL.
        if (grd.Rows.Count == 1)
        {
            Response.Cookies["songURL"].Value = grd.Rows[0].Cells[0].Text;
        }
    }

Final Words

Now your Music Playlist Project is complete. Run and Enjoy...
I hope you will find this article helpful in programming for Music Playlist, Embedding Windows Media Player using Javascript, Using QueryString, Using Cookies. For more information you can contact me at arshad@m-arshad.co.cc Good Luck!

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 2 of 2 (Total in Forum: 2) (Refresh) FirstPrevNext

Code Change For Firefox Support covenof13 11:59 15 Jan '09   This is for windows 2000 Media player 9. The later versions have backward compatibility but this will work in firefox if the media player plugin is installed. Note the differance in document.getElementById... function getCookieValue() { var cookieValue = document.cookie; var cookieStartsAt = cookieValue.indexOf(" " + "songURL" + "="); if (cookieStartsAt == -1) { cookieStartsAt = cookieValue.indexOf("songURL" + "="); } if (cookieStartsAt == -1) { cookieValue = null; } else { cookieStartsAt = cookieValue.indexOf("=", cookieStartsAt) + 1; var cookieEndsAt = cookieValue.indexOf(";", cookieStartsAt); if (cookieEndsAt == -1) { cookieEndsAt = cookieValue.length; } cookieValue = unescape(cookieValue.substring(cookieStartsAt, cookieEndsAt)); } return cookieValue; } if(-1 != navigator.userAgent.indexOf("MSIE")) { document.getElementById('divPlayer').innerHTML='<object id="mediaPlayer" height="250" width="300" classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" visible="true"><param name="fileName" value="http://covenof13.com/Music/Media-Songs/'+ getCookieValue() + '"/><param name="autoStart" value="true"/><param name="ShowDisplay" value="true"></object>'; } else if(-1 != navigator.userAgent.indexOf("Firefox")) { document.getElementById('divPlayer').innerHTML='<object id="mediaPlayer" height="250" width="300" type="application/x-mplayer2"><param name="fileName" value="http://covenof13.com/Music/Media-Songs/'+ getCookieValue() + '"/><param name="autoStart" value="true"/><param name="ShowDisplay" value="1"></object>'; } Sign In·View Thread·PermaLink 3.00/5 (4 votes) My vote of 1 wegenerb 13:28 23 Nov '08   very bad explanations Sign In·View Thread·PermaLink 5.00/5 (1 vote)

Last Visit: 21:39 19 Mar '10     Last Update: 21:39 19 Mar '10 1