ARTICLE

Create your music player in c# using gridview with simple logic

Posted by Kaushik Patel Articles | Visual C# December 05, 2007
This article gives you an idea how to create your own mp3 player in asp.net 2.0.
Reader Level:

public partial class _Default : System.Web.UI.Page
{
     public string xFile;
     public void getFileList()
     {
         
DirectoryInfo di=new DirectoryInfo("C://Temp/My");
          DataTable dt = new DataTable();
          dt.Columns.Add("songname");
          if (di.Exists == true)
          {
              foreach (FileInfo fi in di.GetFiles())
              {
                   DataRow dr = dt.NewRow();
                   dr["songname"] = fi.FullName;
                   dt.Rows.Add(dr);
              }
          }
          GridView1.DataSource = dt;
          GridView1.DataBind();
          }
protected void Page_Load(object sender, EventArgs e)
{
     if (!IsPostBack)
     {
         getFileList(); }
     }
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
     if (e.Row.RowType != DataControlRowType.Header)
     {
          e.Row.Attributes["onmouseover"] = "javascript:setMouseOverColor(this);";
          e.Row.Attributes["onmouseout"] = "javascript:setMouseOutColor(this);";
          e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink((GridView
         
sender, "Select$" + e.Row.RowIndex);
     }
}
protected void imgBt_Click(object sender, ImageClickEventArgs e)
{
     xFile = GridView1.Rows[GridView1.SelectedIndex].Cells[1].Text;
     TextBox1.Text = xFile;
     string _Height = "50";
     string _Width = "250";
     StringBuilder sb = new StringBuilder("<OBJECT ID='" + this.ClientID + "' name='" + 
     this
.ClientID + "' " + "CLASSID='CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6'" +
     "VIEWASTEXT" +"height=" + _Height + " " + "width=" + _Width + ">");
    
string _fileName = xFile; //"C://myExample/008 BACHAPAN - MANHAR.MP3";
     sb.Append("<PARAM name='URL' value='" + xFile + "'>");
     sb.Append("<PARAM name='AutoStart' value='True'>");
     sb.Append("<PARAM name='playCount' value='1'>");
     sb.Append("<PARAM name='volume' value='100'>");

     //output ending object tag

     sb.Append("</OBJECT>");

     //flush everything to the output stream

     Response.Write(sb.ToString());
}

////

Write below javascript code in to your ASPX page

<script type="text/javascript">
var oldgridSelectedColor;
function setMouseOverColor(element)
{
oldgridSelectedColor = element.style.backgroundColor;
element.style.backgroundColor='#dcdcdc';
element.style.cursor='hand';

//element.style.textDecoration='underline';
}
function setMouseOutColor(element)
{
    
element.style.backgroundColor=oldgridSelectedColor;
    
element.style.textDecoration='none';
}
function playMe(xfile)
{
    
alert(xfile);
    
var mfile = xfile;
    
document.write("<EMBED SRC='"+ mfile +"' WIDTH=100 HEIGHT=100></EMBED>");
     
alert(mfile);
}
     
function checkm()
</script>

Login to add your contents and source code to this article
post comment
     

I was having some trouble getting the events to work. So I changed that around some. I changed it so it recurses all directories under the path for .mp3 files. I added an update panel so that the Grid doesn't refresh when you play a song. Helps with response time if the Grid is really large. I also reduced the code required to play the songs.. I also removed some of the java script that wasn't being used.


public
string xFile;

public void getFileList()

{

DirectoryInfo di = new DirectoryInfo("Your dir ");

DataTable dt = new DataTable();

dt.Columns.Add("songname");

if (di.Exists == true)

{

foreach (FileInfo fi in di.GetFiles("*.mp3", SearchOption.AllDirectories))

//foreach (FileInfo fi in di.GetFiles())

{

DataRow dr = dt.NewRow();

dr["songname"] = fi.FullName;

dt.Rows.Add(dr);

}

}

GridView1.DataSource = dt;

GridView1.DataBind();

}

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

getFileList();

}

}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

e.Row.Attributes["onmouseover"] = "javascript:setMouseOverColor(this);";

e.Row.Attributes["onmouseout"] = "javascript:setMouseOutColor(this);";

LinkButton _singleClickButton = (LinkButton)e.Row.Cells[0].Controls[0];

if (_singleClickButton != null)

{

string _jsSingle = ClientScript.GetPostBackClientHyperlink(_singleClickButton, "Select$" + e.Row.RowIndex);

e.Row.Attributes["onclick"] = _jsSingle;

}

}

}

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

{

xFile = GridView1.Rows[GridView1.SelectedIndex].Cells[1].Text;

TextBox1.Text = xFile;

embed1.Attributes.Add("src", xFile);

}

}

Font page:

<script type="text/javascript">

var oldgridSelectedColor;

function setMouseOverColor(element) {

oldgridSelectedColor = element.style.backgroundColor;

element.style.backgroundColor = '#dcdcdc';

element.style.cursor = 'hand';

//element.style.textDecoration='underline';

}

function setMouseOutColor(element) {

element.style.backgroundColor = oldgridSelectedColor;

element.style.textDecoration = 'none';

}

</script>

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="scriptmanager1" runat="server">

</asp:ScriptManager>

<asp:UpdatePanel ID="upanel1" runat="server" UpdateMode="Conditional"

ChildrenAsTriggers="False" >

<Triggers>

<asp:AsyncPostBackTrigger ControlID="GridView1"

EventName="SelectedIndexChanged" />

</Triggers>

<ContentTemplate>

<embed runat="server" id="embed1" name="embed1" src=""

width="250" height="200"></embed>

<asp:TextBox ID="TextBox1" runat="server">

</asp:TextBox>

</ContentTemplate>

</asp:UpdatePanel>

<div>

<asp:GridView ID="GridView1" OnRowDataBound="GridView1_RowDataBound" runat="server"

Height="154px" Width="243px" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">

<Columns>

<asp:ButtonField CommandName="select" ButtonType="Link" runat="server" Text="select"

Visible="false" />

</Columns>

</asp:GridView>

</div>

</form>

</body>

</html>



 

Posted by Michael Freed Jun 10, 2009

This is what I wanted. I just modiifed the Grid view to be filled from a database. Thanks a lot

Posted by thiruna Oct 04, 2008

MAKE IT IN SImPLE CODING SO CAN I UNDErSTAND I AM A c#(G U I) STUDeNT SO It'S hARd TO UNDeRStAND mAIL ME THIS CONTeNT AT yuvilikeu@c-sharpcorner.com it's a humble request pleaseeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

Posted by yuvraj singh Dec 28, 2007

made it in more simple language so that i can understand it i am a c#(gui) student so it's hard to got this copde easily

Posted by yuvraj singh Dec 28, 2007

If i don't have media player installed on my machine then what will happen? Anyswayz good short smart article

Posted by Roy Keane Dec 21, 2007
COMMENT USING
PREMIUM SPONSORS
DynamicPDF™ product line allows you to dynamically generate PDF documents, merge PDF documents and add new content to existing PDF documents from within your applications.
SPONSORED BY
  • PDF reports have never been easier to create. With our included WYSIWYG Designer, you can layout your reports, set up your data source and let DynamicPDF ReportWriter do the rest.