稳扎稳打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开发）

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

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( 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
[源码下载]

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

相关推荐