zoukankan      html  css  js  c++  java
  • 稳扎稳打Silverlight(2) 1.0实例之支持录音和回放的钢琴(Silverlight+ASP.NET AJAX+DLINQ)

    [源码下载]


    稳扎稳打Silverlight(2) - 1.0实例之支持录音和回放的钢琴(Silverlight+ASP.NET AJAX+DLINQ)


    作者:webabcd


    介绍
    用Silverlight 1.0实现一个可以用鼠标或键盘弹奏,并且支持录音和回放的钢琴。(Silverlight+ASP.NET AJAX+DLINQ)
    参考:http://silverlight.net/community/communitygallery.aspx


    示例
    Piano.xaml(用Expression Blend开发)
    <Canvas
        
    xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x
    ="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Name
    ="Piano" 
        Width
    ="1024" Height="500">
        
    <Image Source="Image/bg.jpg" Height="500" Width="1024"/>

        
    <Image x:Name="imgC" Height="500" Width="1024" Canvas.Top="0" Source="Image/C.jpg" Opacity="0"/>
        
    <Image x:Name="imgC2" Height="500" Width="1024" Canvas.Top="0" Source="Image/C2.jpg" Opacity="0"/>
        
    <Image x:Name="imgD" Height="500" Width="1024" Canvas.Top="0" Source="Image/D.jpg" Opacity="0"/>
        
    <Image x:Name="imgD2" Height="500" Width="1024" Canvas.Top="0" Source="Image/D2.jpg" Opacity="0"/>
        
    <Image x:Name="imgE" Height="500" Width="1024" Canvas.Top="0" Source="Image/E.jpg" Opacity="0"/>
        
    <Image x:Name="imgF" Height="500" Width="1024" Canvas.Top="0" Source="Image/F.jpg" Opacity="0"/>
        
    <Image x:Name="imgF2" Height="500" Width="1024" Canvas.Top="0" Source="Image/F2.jpg" Opacity="0"/>
        
    <Image x:Name="imgG" Height="500" Width="1024" Canvas.Top="0" Source="Image/G.jpg" Opacity="0"/>
        
    <Image x:Name="imgG2" Height="500" Width="1024" Canvas.Top="0" Source="Image/G2.jpg" Opacity="0"/>
        
    <Image x:Name="imgA" Height="500" Width="1024" Canvas.Top="0" Source="Image/A.jpg" Opacity="0"/>
        
    <Image x:Name="imgA2" Height="500" Width="1024" Canvas.Top="0" Source="Image/A2.jpg" Opacity="0"/>
        
    <Image x:Name="imgB" Height="500" Width="1024" Canvas.Top="0" Source="Image/B.jpg" Opacity="0"/>

        
    <MediaElement x:Name="C" AutoPlay="false" Source="Media/C.wma"/>
        
    <MediaElement x:Name="C2" AutoPlay="false" Source="Media/C2.wma"/>
        
    <MediaElement x:Name="D" AutoPlay="false" Source="Media/D.wma"/>
        
    <MediaElement x:Name="D2" AutoPlay="false" Source="Media/D2.wma"/>
        
    <MediaElement x:Name="E" AutoPlay="false" Source="Media/E.wma"/>
        
    <MediaElement x:Name="F" AutoPlay="false" Source="Media/F.wma"/>
        
    <MediaElement x:Name="F2" AutoPlay="false" Source="Media/F2.wma"/>
        
    <MediaElement x:Name="G" AutoPlay="false" Source="Media/G.wma"/>
        
    <MediaElement x:Name="G2" AutoPlay="false" Source="Media/G2.wma"/>
        
    <MediaElement x:Name="A" AutoPlay="false" Source="Media/A.wma"/>
        
    <MediaElement x:Name="A2" AutoPlay="false" Source="Media/A2.wma"/>
        
    <MediaElement x:Name="B" AutoPlay="false" Source="Media/B.wma"/>

        
    <Canvas x:Name="pathCanvas">
            
    <Path x:Name="CPath" Opacity="0.01" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="161.666656494141" Height="272.333312988281" Canvas.Left="135.5" Canvas.Top="138.83332824707" Data="M272.66667,140 L136,330 147.33333,336 162.66667,410.66667 247.33333,410 234.66667,330.66667 278,248 254,242.66667 258.66667,200.66667 296.66667,139.33333 272.66667,140" />
            
    <Path x:Name="C2Path" Opacity="0.01" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="91" Height="136.333319306374" Canvas.Left="263.5" Canvas.Top="105.500005066396" Data="M325.33333,106.66667 L264,202.66667 266,241.33333 307.33333,238.66667 354,138 351.33333,106.66666 326.66667,106" />
            
    <Path x:Name="DPath" Opacity="0.01" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="131" Height="274.333297729492" Canvas.Left="247.499999999999" Canvas.Top="137.499984741212" Data="M358,142.66667 L311.33333,243.33333 288.66667,246 248,330.66667 258,338 266.66667,411.33333 354,410.66665 347.33333,330.66668 374,246.66668 350,243.33336 352.66667,202.66669 378,138.00005 360.66667,140.00005" />
            
    <Path x:Name="D2Path" Opacity="0.01" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="70.3333129882813" Height="134.333319425583" Canvas.Left="356.83334350586" Canvas.Top="107.500003457069" Data="M394.66667,108.66667 L357.33333,204 359.33333,241.33333 398,240.66667 426.66667,134.66667 425.33333,108" />
            
    <Path x:Name="EPath" Opacity="0.01" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="117.666656494141" Height="274.333343505859" Canvas.Left="358.833343505859" Canvas.Top="137.5" Data="M431.33333,140 L403.33333,245.33333 381.33333,248 359.33333,330 368.66667,339.33333 372,411.33333 458,411.33333 455.33333,331.33333 476,138 433.33333,138.66667" />
            
    <Path x:Name="FPath" Opacity="0.01" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="99.6666564941406" Height="273.666680037975" Canvas.Left="470.83334350586" Canvas.Top="138.833345949649" Data="M486.66667,140.66667 L471.33333,332 477.33333,334 476.66667,412 563.33333,411.33335 564,339.33334 570,328 560,246.66665 535.33333,243.33331 530,139.3333 486.66667,139.33329" />
            
    <Path x:Name="F2Path" Opacity="0.01" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="51" Height="133.666656494141" Canvas.Left="534.166687011719" Canvas.Top="108.16665649414" Data="M538.66667,109.33333 L534.66667,137.33333 542,241.33333 584,240.66666 584.66667,205.33334 568,108.66667 540.66667,108.66668" />
            
    <Path x:Name="GPath" Opacity="0.01" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="111" Height="274.333343505859" Canvas.Left="570.166687011719" Canvas.Top="137.5" Data="M570.66667,248 L582.66667,336 582,411.33333 669.33333,410.66667 672.66667,332.66667 680.66667,330 655.33333,245.33333 631.33333,244 601.33333,138 578.66667,138 594.66667,244.66667 571.33333,248" />
            
    <Path x:Name="G2Path" Opacity="0.01" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="76.3333129882813" Height="131.666656494141" Canvas.Left="603.5" Canvas.Top="110.166664123534" Data="M612,111.33333 L604,136.66667 636,238.66667 636.66667,241.33333 679.33333,241.33333 679.33333,206.66667 641.33333,111.33334 612.66667,110.66668" />
            
    <Path x:Name="APath" Opacity="0.01" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="138.333312988281" Height="274.333343505859" Canvas.Left="655.5" Canvas.Top="137.5" Data="M665.33333,246 L694.66667,336.66667 686,411.33333 774.66667,410 785.33333,335.33333 793.33333,328.66667 750.66667,246.66667 722,243.33333 673.33333,138 656,138.66667 688.66667,216.66667 685.33333,245.33333 666,246" />
            
    <Path x:Name="A2Path" Opacity="0.01" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="95" Height="131" Canvas.Left="676.166687011719" Canvas.Top="110.833320617675" Data="M682,111.33333 L676.66667,138.66667 730.66667,240.66667 768.66667,241.33333 770.66667,204.00001 713.33333,111.33334 683.33333,111.33335" />
            
    <Path x:Name="BPath" Opacity="0.01" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="172.333312988281" Height="275.666687011719" Canvas.Left="733.5" Canvas.Top="136.833320051431" Data="M758,247.33333 L806,333.33333 790,412 878,412 894.66667,334 905.33333,327.33333 764.66667,138.66667 734,137.33333 776.66667,207.33334 778.66667,246.66668 758.66667,248" />
        
    </Canvas>

        
    <Ellipse x:Name="stopRecord"  Height="30" Width="30" Canvas.Left="40" Canvas.Top="430"
          Stroke
    ="Black" StrokeThickness="3" Fill="Red"/>
        
    <Ellipse x:Name="startRecord"  Height="30" Width="30" Canvas.Left="80" Canvas.Top="430"
          Stroke
    ="Black" StrokeThickness="3" Fill="Green"/>

        
    <Canvas Width="60" Height="30" Canvas.Left="760" Canvas.Top="422" Cursor="Hand">
            
    <TextBlock x:Name="play" TextWrapping="Wrap" FontSize="28" Foreground="#FF4C7185" Text="Play">
            
    </TextBlock>
        
    </Canvas>

        
    <TextBlock x:Name="lblMussicBook" TextWrapping="Wrap" Canvas.Left="120" Canvas.Top="434" FontSize="14" Foreground="#FFFFFFFF" Text="MusicBook:">
        
    </TextBlock>
        
    <TextBlock x:Name="lblName" TextWrapping="Wrap" Canvas.Left="520" Canvas.Top="434" FontSize="14" Foreground="#FFFFFFFF" Text="Name:">
        
    </TextBlock>
    </Canvas>

    Piano.xaml.js
    if (!window.Piano)
        window.Piano 
    = {};

    Piano.Page 
    = function() 
    {
    }


    Piano.Page.prototype 
    =
    {
        handleLoad: 
    function(control, userContext, rootElement) 
        
    {
            
    this.control = control;
            
            
    // Sample event hookup:    
            rootElement.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(thisthis.handleMouseDown));
        }
    ,
        
        
    // Sample event handler
        handleMouseDown: function(sender, eventArgs) 
        
    {
            
    // The following line of code shows how to find an element by name and call a method on it.
            // this.control.content.findName("Timeline1").Begin();
        }

    }

    Default.aspx
    <%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs"
        Inherits
    ="_10_Piano_Default" Title="支持录音和回放的钢琴" 
    %>

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

        
    <script type="text/javascript" src="../Silverlight.js"></script>

        
    <script type="text/javascript" src="Default.aspx.js"></script>

        
    <script type="text/javascript" src="Piano.xaml.js"></script>

        
    <script type="text/javascript" src="Piano.js"></script>

        
    <style type="text/css">
            .silverlightHost
            
    {
                height
    : 500px;
                width
    : 1024px;
            
    }

        
    </style>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
        
    <asp:ScriptManager ID="ScriptManager1" runat="server">
        
    </asp:ScriptManager>
        
    <div id="SilverlightControlHost" class="silverlightHost">

            
    <script type="text/javascript">
                
    var txtInput = '<%= txtInput.ClientID %>';
                
    var txtName = '<%= txtName.ClientID %>';
                createSilverlight();
            
    </script>

            
    <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                
    <ProgressTemplate>
                    
    <div style="position: absolute; top: 0px; background-color: Red; color: White; z-index: 999">
                        Loading
    </div>
                
    </ProgressTemplate>
            
    </asp:UpdateProgress>
            
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                
    <ContentTemplate>
                    
    <asp:GridView ID="GridView1" runat="server" Style="position: absolute; top: 0px;
                         1024px"
     AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
                        DataKeyNames
    ="ID" DataSourceID="LinqDataSource1" RowStyle-HorizontalAlign="Center"
                        PageSize
    ="2" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
                        
    <Columns>
                            
    <asp:CommandField ShowSelectButton="True" HeaderText="选择" ItemStyle-Width="40px"></asp:CommandField>
                            
    <asp:CommandField ShowDeleteButton="True" HeaderText="删除" ItemStyle-Width="40px"></asp:CommandField>
                            
    <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" ReadOnly="True"
                                SortExpression
    ="ID" ItemStyle-Width="40px"></asp:BoundField>
                            
    <asp:BoundField DataField="Name" HeaderText="名称" SortExpression="Name"></asp:BoundField>
                            
    <asp:TemplateField HeaderText="乐谱" SortExpression="Details" ItemStyle-Width="700px">
                                
    <ItemTemplate>
                                    
    <div style="overflow: hidden;  666px">
                                        
    <asp:Label ID="lblDetails" runat="server" Text='<%# Bind("Details") %>'></asp:Label>
                                    
    </div>
                                
    </ItemTemplate>
                            
    </asp:TemplateField>
                        
    </Columns>
                    
    </asp:GridView>
                    
    <asp:TextBox ID="txtInput" runat="server" Style="position: absolute; left: 200px;
                        top: 434px;  300px"
     />
                    
    <asp:TextBox ID="txtName" runat="server" Style="position: absolute; left: 566px;
                        top: 434px;"
     />
                
    </ContentTemplate>
                
    <Triggers>
                    
    <asp:AsyncPostBackTrigger ControlID="btnAdd" />
                
    </Triggers>
            
    </asp:UpdatePanel>
            
    <asp:LinqDataSource ID="LinqDataSource1" runat="server" ContextTypeName="Data.MusicBookDataContext"
                EnableDelete
    ="True" TableName="MusicBook">
            
    </asp:LinqDataSource>
            
    <asp:Button ID="btnAdd" runat="server" Text="添加" Style="position: absolute; left: 710px;
                top: 434px;"
     OnClick="btnAdd_Click" />
        
    </div>
    </asp:Content>

    Default.aspx.cs
    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Linq;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.Xml.Linq;

    public partial class _10_Piano_Default : System.Web.UI.Page
    {
        
    protected void Page_Load(object sender, EventArgs e)
        
    {

        }


        
    protected void btnAdd_Click(object sender, EventArgs e)
        
    {
            Data.MusicBookDataContext mbdc 
    = new Data.MusicBookDataContext();
            Data.MusicBook mb 
    = new Data.MusicBook();

            mb.Name 
    = txtName.Text;
            mb.Details 
    = txtInput.Text;

            mbdc.MusicBook.Add(mb);
            mbdc.SubmitChanges();

            txtName.Text 
    = "";
            txtInput.Text 
    = "";

            GridView1.DataBind();
        }


        
    protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
        
    {
            txtName.Text 
    = GridView1.Rows[GridView1.SelectedIndex].Cells[3].Text;
            txtInput.Text 
    = ((Label)GridView1.Rows[GridView1.SelectedIndex].Cells[4].FindControl("lblDetails")).Text;
        }

    }


    Default.aspx.js
    function createSilverlight()
    {
        
    var scene = new Webabcd.Piano();
        Silverlight.createObjectEx(
    {
            source: 
    "Piano.xaml",
            parentElement: document.getElementById(
    "SilverlightControlHost"),
            id: 
    "SilverlightControl",
            properties: 
    {
                 
    "100%",
                height: 
    "100%",
                version: 
    "1.0",
                isWindowless: 
    "true"
            }
    ,
            events: 
    {
                onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
            }

        }
    );
    }



    if (!window.Silverlight) 
        window.Silverlight 
    = {};

    Silverlight.createDelegate 
    = function(instance, method) {
        
    return function() {
            
    return method.apply(instance, arguments);
        }

    }

    Piano.js
    if (!window.Webabcd)
        window.Webabcd 
    = {};

    Webabcd.Piano 
    = function() 
    {
    }


    Webabcd.Piano.prototype 
    =
    {
        handleLoad: function(control, userContext, rootElement) 
        
    {
            
    // plugin(插件)
            this.control = control;
            
            
    // 根Canvas元素
            this.rootElement = rootElement;
            
            
    // object.addEventListener(eventName, functionReference)为对象添加一个事件监听器(事件名称,函数名称)
            
    // Silverlight.createDelegate用来创建一个调用“this”上下文下的特定函数的委托,其被定义在runtime
            
    // Silverlight.createDelegate = function(instance, method) 
            
    // {
            
    //   return function() 
            
    //   {
            
    //      return method.apply(instance, arguments);
            
    //    }
            
    // }
            this.rootElement.addEventListener("GotFocus", Silverlight.createDelegate(thisthis.resetPiano));
            
    this.rootElement.addEventListener("KeyDown", Silverlight.createDelegate(thisthis.handleKeyDown));
            
    this.rootElement.addEventListener("KeyUp", Silverlight.createDelegate(thisthis.handleKeyUp));

            
    // 鼠标热区的Canvas
            
    // object.findName(name)
            this.pathCanvas = rootElement.findName("pathCanvas");   

            
    // 开始录制按钮
            this.startRecord = rootElement.findName("startRecord");   
            
    this.startRecord.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(thisthis.handleStartRecord));

            
    // 停止录制按钮
            this.stopRecord = rootElement.findName("stopRecord");   
            
    this.stopRecord.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(thisthis.handleStopRecord));
            
            
    // 默认为选中停止录制按钮
            
    // plugin.content.findName(objectName)
            document.getElementById('SilverlightControl').content.findName("stopRecord").Stroke = "LightBlue";
            document.getElementById(
    'SilverlightControl').content.findName("stopRecord").StrokeThickness = 6;
            
            
    // 播放按钮
            this.play = rootElement.findName("play");   
            
    this.play.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(thisthis.handlePlay));

            
    // object.children对应<Canvas>一个或多个子元素</Canvas>
            
    // object.getItem(index)获取集合内指定的对象
            
    // object.count集合内的成员数量
            for(var i = 0; i<this.pathCanvas.children.count; ++i)
            
    {
                
    // 为所有鼠标热区添加相关的事件监听器
                this.pathCanvas.children.getItem(i).addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(thisthis.handleMouseDown));
                
    this.pathCanvas.children.getItem(i).addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(thisthis.handleMouseUp));
            }

            
            
    // 是否启用录制
            this._enableRecord = false;
            
    // 上一次按键的时间
            this._prevTime = new Date().getTime();
        }
    ,
        
        
    // 单击开始录制按钮
        handleStartRecord: function(sender, eventArgs) 
        
    {
            
    // 设置开始录制按钮样式
            sender.Stroke = 'LightBlue';
            sender.StrokeThickness 
    = 6;
            
            
    // 设置停止录制按钮样式
            document.getElementById('SilverlightControl').content.findName("stopRecord").Stroke = "Black";
            document.getElementById(
    'SilverlightControl').content.findName("stopRecord").StrokeThickness = 3;
            
            
    // 启用录音
            this._enableRecord = true;
            
    // 记录时间
            this._prevTime = new Date().getTime();
        }
    ,
        
        
    // 单击停止录制按钮
        handleStopRecord: function(sender, eventArgs) 
        
    {
            
    // 设置停止录制按钮样式
            sender.Stroke = 'LightBlue';
            sender.StrokeThickness 
    = 6;

            
    // 设置开始录制按钮样式
            document.getElementById('SilverlightControl').content.findName("startRecord").Stroke = "Black";
            document.getElementById(
    'SilverlightControl').content.findName("startRecord").StrokeThickness = 3;

            
    // 清空乐谱名称和乐谱内容
            document.getElementById(txtInput).value = '';
            document.getElementById(txtName).value 
    = '';
            
            
    // 停止录音
            this._enableRecord = false;
        }
    ,
        
        
    // 单击播放按钮
        handlePlay: function(sender, eventArgs) 
        
    {
            
    // 根据乐谱自动播放
            autoPlay(this0);
        }
    ,
        
        
    // 记录乐谱
        handleRecord: function(currentPianoKeyID)
        
    {
            
    if (this._enableRecord)
            
    {
                
    // 插入乐谱
                document.getElementById(txtInput).value += new Date().getTime() - this._prevTime + ',';
                document.getElementById(txtInput).value 
    += currentPianoKeyID + ';';

                
    // 更新时间
                this._prevTime = new Date().getTime();
            }

        }
    ,
        
        handleMouseDown: function(sender, eventArgs) 
        
    {
            
    // object.captureMouse()为对象启用鼠标捕捉(鼠标离开热区也可触发相关事件,如MouseLeftButtonUp)
            sender.captureMouse();
            
            var currentPianoKeyID 
    = sender.name.substr(0, sender.name.indexOf("Path"));
            var currentImage 
    = sender.findName("img" + currentPianoKeyID);
            currentImage.opacity 
    = 1;
            
            var currentMediaElement 
    = sender.findName(currentPianoKeyID);
            currentMediaElement.stop();
            currentMediaElement.play();
            
            
    this.handleRecord(currentPianoKeyID);
        }
    ,
        
        handleMouseUp: function(sender, eventArgs) 
        
    {
            
    // object.releaseMouseCapture()释放对象的鼠标捕捉
            sender.releaseMouseCapture();
            
            var currentPianoKeyID 
    = sender.name.substr(0, sender.name.indexOf("Path"));
            var currentImage 
    = sender.findName("img" + currentPianoKeyID);
            currentImage.opacity 
    = 0;
        }
    ,

        pressKey: function (currentPianoKeyID)
        
    {
            var currentImage 
    = this.control.content.findName("img" + currentPianoKeyID);
            currentImage.opacity 
    = 1;
            
            var currentMediaElement 
    = this.control.content.findName(currentPianoKeyID);
            
    // object.play()播放,object.pause()暂停,object.stop()停止
            currentMediaElement.stop();
            currentMediaElement.play();
        }
    ,

        depressKey: function (currentPianoKeyID)
        
    {
            var currentImage 
    = this.control.content.findName("img" + currentPianoKeyID);
            currentImage.opacity 
    = 0;
        }
    ,

        handleKeyDown: function (sender, eventArgs)
        
    {
            
    switch (eventArgs.Key)
            
    {
                
    // eventArgs.Key - 获取与该事件相关的键盘按键
                case 55this.pressKey("C"); this.handleRecord("C"); break;
                
    case 48this.pressKey("C2"); this.handleRecord("C2"); break;
                
    case 53this.pressKey("D");  this.handleRecord("D"); break;
                
    case 33this.pressKey("D2"); this.handleRecord("D2"); break;
                
    case 32this.pressKey("E");  this.handleRecord("E"); break;
                
    case 51this.pressKey("F");  this.handleRecord("F"); break;
                
    case 36this.pressKey("F2"); this.handleRecord("F2"); break;
                
    case 31this.pressKey("G");  this.handleRecord("G"); break;
                
    case 37this.pressKey("G2"); this.handleRecord("G2"); break;
                
    case 43this.pressKey("A");  this.handleRecord("A"); break;
                
    case 39this.pressKey("A2"); this.handleRecord("A2"); break;
                
    case 42this.pressKey("B");  this.handleRecord("B"); break;
            }

        }
    ,

        handleKeyUp: function (sender, eventArgs)
        
    {
            
    switch (eventArgs.Key)
            
    {
                
    // eventArgs.Key - 获取与该事件相关的键盘按键
                case 55this.depressKey("C");  break;
                
    case 48this.depressKey("C2"); break;
                
    case 53this.depressKey("D");  break;
                
    case 33this.depressKey("D2"); break;
                
    case 32this.depressKey("E");  break;
                
    case 51this.depressKey("F");  break;
                
    case 36this.depressKey("F2"); break;
                
    case 31this.depressKey("G");  break;
                
    case 37this.depressKey("G2"); break;
                
    case 43this.depressKey("A");  break;
                
    case 39this.depressKey("A2"); break;
                
    case 42this.depressKey("B");  break;
            }

        }
    ,
        
        resetPiano: function(sender, eventArgs) 
        
    {
            
    this.depressKey("C");
            
    this.depressKey("C2");
            
    this.depressKey("D");
            
    this.depressKey("D2");
            
    this.depressKey("E");
            
    this.depressKey("F");
            
    this.depressKey("F2");
            
    this.depressKey("G");
            
    this.depressKey("G2");
            
    this.depressKey("A");
            
    this.depressKey("A2");
            
    this.depressKey("B");
        }

    }



    var _obj; 
    // Webabcd.Piano对象
    var _index; // 乐谱索引
    function autoPlay(obj, index)
    {
        _obj 
    = obj;
        _index 
    = index;
        
        execAutoPlay();
    }


    function execAutoPlay()
    {
        _obj.resetPiano();

        var str 
    = document.getElementById(txtInput).value; // 乐谱
        var ary = str.split(';'); // 间隔时间,按键名称
        
        
    if (_index != 0 && typeof(ary[_index-1]) != 'undefined' && ary[_index-1!= '')
        
    {
            
    // 按下当前乐谱索引的上一个索引的按键
            _obj.pressKey(ary[_index-1].split(',')[1]); 
        }

         
        var currentIndex 
    = _index;   
        _index
    ++;
        
        
    if (typeof(ary[currentIndex]) != 'undefined')
        
    {
            setTimeout(
    "_obj.resetPiano();"100)
            
    // 经过当前乐谱索引的间隔时间则调用execAutoPlay()
            setTimeout("execAutoPlay();", parseInt(ary[currentIndex].split(',')[0], 10)); 
        }

    }



    OK
    [源码下载]
  • 相关阅读:
    Java实现 洛谷 P1060 开心的金明
    (Java实现) 洛谷 P1605 迷宫
    (Java实现) 洛谷 P1605 迷宫
    (Java实现)洛谷 P1093 奖学金
    (Java实现)洛谷 P1093 奖学金
    Java实现 洛谷 P1064 金明的预算方案
    Java实现 洛谷 P1064 金明的预算方案
    (Java实现) 洛谷 P1031 均分纸牌
    QT树莓派交叉编译环开发环境搭建(附多个exe工具下载链接)
    武则天红人对唐睿宗的桃色报复(如此缺少城府,注定了要在宫廷中过早地出局)
  • 原文地址:https://www.cnblogs.com/webabcd/p/896581.html
Copyright © 2011-2022 走看看