稳扎稳打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,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;

                    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, 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"this.resetPiano));

        
this.rootElement.addEventListener("KeyDown"this.handleKeyDown));

        
this.rootElement.addEventListener("KeyUp"this.handleKeyUp));


        
// 鼠标热区的Canvas

        
// object.findName(name)

        this.pathCanvas = rootElement.findName("pathCanvas");   


        
// 开始录制按钮

        this.startRecord = rootElement.findName("startRecord");   

        
this.startRecord.addEventListener("MouseLeftButtonDown"this.handleStartRecord));


        
// 停止录制按钮

        this.stopRecord = rootElement.findName("stopRecord");   

        
this.stopRecord.addEventListener("MouseLeftButtonDown"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"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"this.handleMouseDown));

            
this.pathCanvas.children.getItem(i).addEventListener("MouseLeftButtonUp"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(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
[源码下载]

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


如何在Silverlight4(XAML)中绑定IsEnabled属性?我试过简单的IsEnabled=“{BindingABC}”,但这不起作用–MenuItem总是启用.提前感谢您的线索!干杯编辑:有趣的是,当设置Mode=TwoWay时,绑定似乎有效.但是,在菜单项上移动鼠标后,将更新上下文菜单的外观.这是异步工作吗?右键
我正在编写我的第一个vb.net应用程序(但我也会在这里标记c#,因为我确信即使是一个c#人也可以使用类似的.net实现来回答这个问题).我申请的简短说明:我的桌面应用程序将仅在win平台上运行,使用vb.net,它是一个简单的网吧管理软件,在服务器上运行服务器gui,在工作站上运行客户端gui,
ProcessFile()是在UIThread上运行还是在单独的线程上运行.如果它在UIThread上,如何将文件请求和ProcessFile()移动到单独的线程?varxClient=newServiceReference1.Service1SoapClient();xClient.Retrieve_File_Completed+=newEventHandler<ServiceReference1.Retrieve_Fi
我从同行那里听说,对sharepoint的了解对职业生涯有益.我们不在办公室使用sharepoint.所以不知道如何开始.这些是我的新手问题>学习共享点值得努力吗?>学习sharepoint的资源在哪里?>我是否应该考虑开发哪些参考项目?感谢您的意见.解决方法:SharePoint以如此积极的方式改变了我的职业
我正在尝试保存一个类我的类对象的集合.我收到一个错误说明:Thecollectiondatacontracttype‘System.Collections.Generic.Listcannotbedeserializedbecauseitdoesnothaveapublicparameterlessconstructor.Addingapublicparameterlessconstructorwillf
我需要根据Silverlight中的某些配置值设置给定控件的Style.我想有可能从两种可用的样式(静态资源)中选择一个控件样式.我试图做一些像:<TextBoxStyle="{BindingABC}"/>哪里publicstringABC{get{return"{StaticResourceMyStyle}";}}不幸的是,这不起作用.你有
我刚买了第一台Android设备,我喜欢它…我也很喜欢你可以创建自己的应用程序并随意分发它们.我已经阅读了一些关于Monodroid的内容,而且显然微软希望将Silverlight放在这些设备上,尽管没有太多关于它们的信息……但是Moonlight呢?如果Monodroid就像Mono……为什么我们需要它呢?相反
我们的ASP.NET网站允许用户执行各种查询,并根据从数据库查询的结果显示网络图(如UML图).目前,我们正在生成一个位图并显示它.但由于我们需要支持允许用户以交互方式显示/隐藏某些块的功能,因此我们计划使用Silverlight来渲染图形.我们还计划在未来添加更多互动.我有两个问题:>ASP
我正在开发一个Silverlight4应用程序,我已经创建了一个自定义的启动画面.乍一看,自定义启动画面运行良好–非常好.几天后,我开始注意到闪屏不再显示,屏幕仍然是空白.这似乎只发生在我打开多个指向同一个应用程序的IE选项卡/窗口时.前几个将加载正常,而以下选项卡/窗口将保持“白
这是我的XAML:<ImageVerticalAlignment="Center"HorizontalAlignment="Center"Source="{BindingInput,Converter={StaticResourceByteArrayToBitmapConverter}}"><Image.Rend
问候,我有一个ItemsControl,我更改了模板,为绑定的ItemsSource中的每个对象显示一个RadioButton.但是ItemsSource可以为空,当它为空时我想显示默认值.像“绑定列表中没有可供您选择的项目”……我想到的一种方法是将ItemsControl.Visibility设置为Collapsed,并将TextBlock.Vsibi
堆栈溢出的第一个问题……我是C#的新手,但在学习它时却非常直接.几分钟前我才看到这个tutorial.通过各种c#技术阅读WCF,WPF,Silverlight,c#和asp.net,这是很多技术都可以用c#来实现.我将创建一个Web应用程序c#.我认为SilverLight似乎是我最好的选择.该应用程序将拥有一个数
我正在使用MVVM(Model-View-ViewModel)模式编写应用程序,并利用MicrosoftP&P团队的Prism和Unity位.我有一个包含项目列表的视图.这些项包含在ViewModel中的ObservableCollection中,View中的列表框是数据绑定的(ViewModel设置为View的DataContext).在ViewModel中,我有一个运行的
我有一个应用程序,它在首次运行时显示免责声明页面.选择“接受”或“拒绝”后,您再也看不到该页面了.但是,当您在第一次运行后按后退键尝试关闭应用程序时,您将返回免责声明页面,然后再次点击该页面,返回主页面,然后再次退出.这仅在应用程序第一次运行时发生,但我希望应用程序在
我正在尝试在SilverlightforWindowsPhone中使用异步HttpWebRequest.一切都很完美,直到我到达我应该打电话的地方privatestaticManualResetEventallDone=newManualResetEvent(false);...request.BeginGetResponse(newAsyncCallback(GetResponseCallback),request);a
嗨,我有两个Writablebitmap,一个来自jpg,另一个来自png,并使用此方法在循环中混合颜色:privatestaticColorMix(Colorfrom,Colorto,floatpercent){floatamountFrom=1.0f-percent;returnColor.FromArgb((byte)(from.A*amountFrom+to.A*perc
我需要开发一个程序,它包含一个图像(png),中心有一个洞.在这个图像下将有一个框架,我想点击图像的透明孔我可以点击框架内的按钮.我不知道是否有一种方法可以通过图像或其他方式传播点击.谢谢你的帮助解决方法:你在图像上将IsHitTestVisible设置为false,然后点击浏览.
我正在研究一个silverlight应用程序,我发现List没有Find扩展方法说,List<Something>list=newList<Something>(something);list.Remove(list.Find(e=>e.id==10));没有查找扩展方法我错过了什么?解决方法:它不包括在内以减小运行时的大小.建议您使用LINQ扩展,例如First
我试图弄清楚如何设置Path元素的Data属性来获得此类型的软角:alttexthttp://i42.tinypic.com/1rzu6w.jpg现在我只有这样的尖角:alttexthttp://i42.tinypic.com/2eeleah.jpg我尝试用椭圆玩,但我无法得到我想要的东西.谢谢最佳答案:路径的段具有IsSmoothJoin属性,默认为false.
问题我有一个在远程服务器上运行的restfulWeb服务.我已经制作了一个使用它的WP7应用程序,所以我知道它有效.我正在将应用程序移植到SilverlightWeb应用程序并遇到问题.我已经包含了代码的简化版本以及引发的错误.EndGetResponse方法抛出错误.随意询问更多信息.我一直在寻找解