稳扎稳打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(this, this.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;
                    width: 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; width: 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; width: 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: {
            width: "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(this, this.resetPiano));
        this.rootElement.addEventListener("KeyDown", Silverlight.createDelegate(this, this.handleKeyDown));
        this.rootElement.addEventListener("KeyUp", Silverlight.createDelegate(this, this.handleKeyUp));

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

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

        // 停止录制按钮
        this.stopRecord = rootElement.findName("stopRecord");   
        this.stopRecord.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.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(this, this.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(this, this.handleMouseDown));
            this.pathCanvas.children.getItem(i).addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.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(this, 0);
    },
    
    // 记录乐谱
    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 55: this.pressKey("C"); this.handleRecord("C"); break;
            case 48: this.pressKey("C2"); this.handleRecord("C2"); break;
            case 53: this.pressKey("D");  this.handleRecord("D"); break;
            case 33: this.pressKey("D2"); this.handleRecord("D2"); break;
            case 32: this.pressKey("E");  this.handleRecord("E"); break;
            case 51: this.pressKey("F");  this.handleRecord("F"); break;
            case 36: this.pressKey("F2"); this.handleRecord("F2"); break;
            case 31: this.pressKey("G");  this.handleRecord("G"); break;
            case 37: this.pressKey("G2"); this.handleRecord("G2"); break;
            case 43: this.pressKey("A");  this.handleRecord("A"); break;
            case 39: this.pressKey("A2"); this.handleRecord("A2"); break;
            case 42: this.pressKey("B");  this.handleRecord("B"); break;
        }
    },

    handleKeyUp: function (sender, eventArgs)
    {
        switch (eventArgs.Key)
        {
            // eventArgs.Key - 获取与该事件相关的键盘按键
            case 55: this.depressKey("C");  break;
            case 48: this.depressKey("C2"); break;
            case 53: this.depressKey("D");  break;
            case 33: this.depressKey("D2"); break;
            case 32: this.depressKey("E");  break;
            case 51: this.depressKey("F");  break;
            case 36: this.depressKey("F2"); break;
            case 31: this.depressKey("G");  break;
            case 37: this.depressKey("G2"); break;
            case 43: this.depressKey("A");  break;
            case 39: this.depressKey("A2"); break;
            case 42: this.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
[源码下载]