Mobile Content

Saturday, July 14, 2012

Built and Play Piano using Asp.net

In this blog I am showing the example of Making piano.
"Built and play piano using keyboard and mouse"


We can play piano only in client side. On server side this code will not be helpful.
Because i am using "winmm.dll" file for making sound which is located in client computer.


The script will check the keypress event by knowing their ASCII value.
in .aspx

<head runat="server">
    <title></title>
    <script type="text/javascript">


        document.onkeyup = KeyCheck;


        function KeyCheck(e) {
            var KeyID = (window.event) ? event.keyCode : e.keyCode;
            {
                __doPostBack('__Page', KeyID);
                
            }
        }


    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="height: 200px; vertical-align: top; background-color:Yellow;" align="center">
        <table>
            <tr>
                <td valign="top"  style="width:41px">
                    <asp:Button ID="Button1" runat="server" Text="A" BackColor="White" BorderColor="Black"
                        BorderStyle="Solid" BorderWidth="1px" Height="192px" Width="41px" />
                    &nbsp;
                </td>
                <td valign="top" style="width:41px">
                    <asp:Button ID="Button2" runat="server" Text="S" BackColor="Black" BorderColor="white"
                        BorderStyle="Solid" BorderWidth="1px" Height="139px" Style="margin-bottom: 0px"
                        ForeColor="White" Width="41px" />&nbsp;
                </td>
                <td valign="top"  style="width:41px">
                    <asp:Button ID="Button3" runat="server" Text="D" BackColor="White" BorderColor="Black"
                        BorderStyle="Solid" BorderWidth="1px" Height="192px" Width="41px" />
                    &nbsp;
                </td>
                <td valign="top"  style="width:41px">
                    <asp:Button ID="Button4" runat="server" Text="F" BackColor="Black" BorderColor="white"
                        BorderStyle="Solid" BorderWidth="1px" Height="139px" Style="margin-bottom: 0px"
                        ForeColor="White" Width="41px" />&nbsp;
                </td>
                <td valign="top"  style="width:41px">
                    <asp:Button ID="Button5" runat="server" Text="G" BackColor="White" BorderColor="Black"
                        BorderStyle="Solid" BorderWidth="1px" Height="192px" Width="41px" />
                    &nbsp;
                </td>
                <td valign="top"  style="width:41px">
                    <asp:Button ID="Button6" runat="server" Text="H" BackColor="Black" BorderColor="white"
                        BorderStyle="Solid" BorderWidth="1px" Height="139px" Style="margin-bottom: 0px"
                        ForeColor="White" Width="41px" />&nbsp;
                </td>
                <td valign="top"  style="width:41px">
                    <asp:Button ID="Button7" runat="server" Text="J" BackColor="White" BorderColor="Black"
                        BorderStyle="Solid" BorderWidth="1px" Height="192px" Width="41px" />
                    &nbsp;
                </td>
                 <td valign="top"  style="width:41px">
                    <asp:Button ID="Button8" runat="server" Text="K" BackColor="Black" BorderColor="white"
                        BorderStyle="Solid" BorderWidth="1px" Height="139px" Style="margin-bottom: 0px"
                        ForeColor="White" Width="41px" />&nbsp;
                </td>
                <td valign="top"  style="width:41px">
                    <asp:Button ID="Button9" runat="server" Text="L" BackColor="White" BorderColor="Black"
                        BorderStyle="Solid" BorderWidth="1px" Height="192px" Width="41px" />
                    &nbsp;
                </td>
                 <td valign="top"  style="width:41px">
                    <asp:Button ID="Button10" runat="server" Text=";" BackColor="Black" BorderColor="white"
                        BorderStyle="Solid" BorderWidth="1px" Height="139px" Style="margin-bottom: 0px"
                        ForeColor="White" Width="41px" />&nbsp;
                </td>
                <td valign="top"  style="width:41px">
                    <asp:Button ID="Button11" runat="server" Text="'" BackColor="White" BorderColor="Black"
                        BorderStyle="Solid" BorderWidth="1px" Height="192px" Width="41px" />
                    &nbsp;
                </td>
            </tr>
        </table>
    </div>
    <div style=" vertical-align: top;" align="center">
        <table>
            <tr>
                <td valign="top"  style="width:41px" align="center">
                    <asp:Image ID="Image1" runat="server" Width="20px" Height="20px"/> 
                  
                </td>
                <td valign="top" style="width:41px"  align="center">
                 <asp:Image ID="Image2" runat="server" Width="20px" Height="20px"/> 
                </td>
                <td valign="top"  style="width:41px"  align="center">
                   <asp:Image ID="Image3" runat="server" Width="20px" Height="20px" /> 
                </td>
                <td valign="top"  style="width:41px"  align="center">
                    <asp:Image ID="Image4" runat="server" Width="20px" Height="20px"/> 
                </td>
                <td valign="top"  style="width:41px"  align="center">
                  <asp:Image ID="Image5" runat="server" Width="20px" Height="20px"/> 
                </td>
                <td valign="top"  style="width:41px"  align="center">
                   <asp:Image ID="Image6" runat="server" Width="20px" Height="20px"/> 
                </td>
                <td valign="top"  style="width:41px"  align="center">
                  <asp:Image ID="Image7" runat="server" Width="20px" Height="20px"/> 
                </td>
                 <td valign="top"  style="width:41px"  align="center">
                  <asp:Image ID="Image8" runat="server" Width="20px" Height="20px"/> 
                </td>
                 <td valign="top"  style="width:41px"  align="center">
                  <asp:Image ID="Image9" runat="server" Width="20px" Height="20px"/> 
                </td>
                 <td valign="top"  style="width:41px"  align="center">
                  <asp:Image ID="Image10" runat="server" Width="20px" Height="20px"/> 
                </td>
                 <td valign="top"  style="width:41px"  align="center">
                  <asp:Image ID="Image11" runat="server" Width="20px" Height="20px"/> 
                </td>
            </tr>
        </table>
    </div>


    <%--<div style=" vertical-align: top;">
       
                    <asp:Image ID="Image12" runat="server" Width="20px" Height="20px" ImageUrl="~/up_arrow.png" style="padding-left:420px"/> 
                  
              
    </div>--%>
    <div align="center">
       <font size="5px" style="font-family:Garamond;" color="red"> Press the no given on piano, to listen sound.</font>
    </div>
    </form>
</body>

Now Code


in .vb page



Imports System.Runtime.InteropServices
Imports Microsoft.VisualBasic.Devices
Imports Microsoft.VisualBasic




Partial Class piano1
    Inherits System.Web.UI.Page
    <DllImport("winmm.dll", EntryPoint:="mciSendStringA")> _
    Private Shared Function mciSendString(ByVal lpstrCommand As String, ByVal lpstrReturnString As String, ByVal uReturnLength As Integer, ByVal hwndCallback As Integer) As Integer
    End Function
    Dim computer As New Computer
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        computer.Audio.Stop()
        visi()
        borderwid()
        Page.ClientScript.GetPostBackEventReference(Me, "")
        Dim eventArgs As String = Request("__EVENTARGUMENT")
        If eventArgs <> "" Then
            If eventArgs = "65" Then


                playsound1()


            ElseIf eventArgs = "83" Then
                playsound2()


            ElseIf eventArgs = "68" Then
                playsound3()
            ElseIf eventArgs = "70" Then
                playsound4()
            ElseIf eventArgs = "71" Then
                playsound5()
            ElseIf eventArgs = "72" Then
                playsound6()
            ElseIf eventArgs = "74" Then
                playsound7()
            ElseIf eventArgs = "75" Then
                playsound8()
            ElseIf eventArgs = "76" Then
                playsound9()
            ElseIf eventArgs = "59" Or eventArgs = "186" Then
                playsound10()
            ElseIf eventArgs = "222" Then
                playsound11()
            End If
        End If


    End Sub
    Public Sub visi()
        Image1.Visible = False
        Image2.Visible = False
        Image3.Visible = False
        Image4.Visible = False
        Image5.Visible = False
        Image6.Visible = False
        Image7.Visible = False
        Image8.Visible = False
        Image9.Visible = False
        Image10.Visible = False
        Image11.Visible = False
    End Sub
    Public Sub borderwid()


        Button1.BorderWidth = "1"
        Button2.BorderWidth = "1"
        Button3.BorderWidth = "1"
        Button4.BorderWidth = "1"
        Button5.BorderWidth = "1"
        Button6.BorderWidth = "1"
        Button7.BorderWidth = "1"
        Button8.BorderWidth = "1"
        Button9.BorderWidth = "1"
        Button10.BorderWidth = "1"
        Button11.BorderWidth = "1"
    End Sub
    Public Sub playsound1()
        computer.Audio.Play(Server.MapPath("piano/s1.wav"), AudioPlayMode.Background)
        Image1.Visible = True
        Image1.ImageUrl = "~/image/up_arrow.png"
        Button1.BorderWidth = "3"
    End Sub
    Public Sub playsound2()
        computer.Audio.Play(Server.MapPath("piano/s2.wav"), AudioPlayMode.Background)
        Image2.Visible = True
        Image2.ImageUrl = "~/image/up_arrow.png"
        Button2.BorderWidth = "3"
    End Sub
    Public Sub playsound3()
        Image3.Visible = True
        Image3.ImageUrl = "~/image/up_arrow.png"
        computer.Audio.Play(Server.MapPath("piano/s3.wav"), AudioPlayMode.Background)
        Button3.BorderWidth = "3"
    End Sub
    Public Sub playsound4()
        Image4.Visible = True
        Image4.ImageUrl = "~/image/up_arrow.png"
        computer.Audio.Play(Server.MapPath("piano/s4.wav"), AudioPlayMode.Background)
        Button4.BorderWidth = "3"
    End Sub
    Public Sub playsound5()
        Image5.Visible = True
        Image5.ImageUrl = "~/image/up_arrow.png"
        computer.Audio.Play(Server.MapPath("piano/s5.wav"), AudioPlayMode.Background)
        Button5.BorderWidth = "3"
    End Sub
    Public Sub playsound6()
        Image6.Visible = True
        Image6.ImageUrl = "~/image/up_arrow.png"
        computer.Audio.Play(Server.MapPath("piano/s6.wav"), AudioPlayMode.Background)
        Button6.BorderWidth = "3"
    End Sub
    Public Sub playsound7()
        Image7.Visible = True
        Image7.ImageUrl = "~/image/up_arrow.png"
        computer.Audio.Play(Server.MapPath("piano/s7.wav"), AudioPlayMode.Background)
        Button7.BorderWidth = "3"
    End Sub


    Public Sub playsound8()
        Image8.Visible = True
        Image8.ImageUrl = "~/image/up_arrow.png"
        computer.Audio.Play(Server.MapPath("piano/s8.wav"), AudioPlayMode.Background)
        Button8.BorderWidth = "3"
    End Sub


    Public Sub playsound9()


        Image9.Visible = True
        Image9.ImageUrl = "~/image/up_arrow.png"
        computer.Audio.Play(Server.MapPath("piano/s9.wav"), AudioPlayMode.Background)
        Button9.BorderWidth = "3"
    End Sub
    Public Sub playsound10()
        Image10.Visible = True
        Image10.ImageUrl = "~/image/up_arrow.png"
        computer.Audio.Play(Server.MapPath("piano/s10.wav"), AudioPlayMode.Background)
        Button10.BorderWidth = "3"
    End Sub
    Public Sub playsound11()
        Image11.Visible = True
        Image11.ImageUrl = "~/image/up_arrow.png"
        computer.Audio.Play(Server.MapPath("piano/s11.wav"), AudioPlayMode.Background)
        Button11.BorderWidth = "3"
    End Sub




    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        visi()
        borderwid()
         playsound1()
    End Sub


    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        visi()
        borderwid()
        playsound2()
    End Sub


    Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click
        visi()
        borderwid()
        playsound3()
    End Sub


    Protected Sub Button4_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button4.Click
        visi()
        borderwid()
        playsound4()
    End Sub


    Protected Sub Button5_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button5.Click
        visi()
        borderwid()
        playsound5()
    End Sub


    Protected Sub Button6_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button6.Click
        visi()
        borderwid()
        playsound6()
    End Sub


    Protected Sub Button8_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button8.Click
        visi()
        borderwid()
        playsound8()
    End Sub


    Protected Sub Button9_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button9.Click
        visi()
        borderwid()
        playsound9()
    End Sub


    Protected Sub Button10_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button10.Click
        visi()
        borderwid()
        playsound10()
    End Sub


    Protected Sub Button11_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button11.Click
        visi()
        borderwid()
        playsound11()
    End Sub


    Protected Sub Button7_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button7.Click
        visi()
        borderwid()
        playsound7()
    End Sub
End Class

Enjoy Piano

2 comments:

  1. Hi Anish, how to build piano client server in real time using asp net?

    ReplyDelete
    Replies
    1. hi,
      You talking about client side.

      It is easy just use that code and put it on client side, make sure the .wav file should be there on server.

      Delete