穩紮穩打Silverlight(2) - 1.0執行個體之支援錄音和回放的鋼琴(Silverlight+ASP.NET AJAX+DLINQ)

<a href="http://down.51cto.com/data/100302" target="_blank">[源碼下載下傳]</a>

介紹

用Silverlight 1.0實作一個可以用滑鼠或鍵盤彈奏，并且支援錄音和回放的鋼琴。(Silverlight+ASP.NET AJAX+DLINQ)

示例

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">

</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"/>

</TextBlock>

</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">

.silverlightHost

{

height: 500px;

width: 1024px;

}

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

var txtInput = '<%= txtInput.ClientID %>';

var txtName = '<%= txtName.ClientID %>';

createSilverlight();

</script>

<asp:UpdateProgress ID="UpdateProgress1" runat="server">

Loading</div>

</ProgressTemplate>

</asp:UpdateProgress>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<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">

<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">

<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>

<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 =

// plugin（插件）

// 根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;

// 記錄時間

// 單擊停止錄制按鈕

handleStopRecord: function(sender, eventArgs)

document.getElementById('SilverlightControl').content.findName("startRecord").Stroke = "Black";

document.getElementById('SilverlightControl').content.findName("startRecord").StrokeThickness = 3;

// 清空樂譜名稱和樂譜内容

document.getElementById(txtInput).value = '';

document.getElementById(txtName).value = '';

// 停止錄音

// 單擊播放按鈕

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();

// 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();

currentImage.opacity = 0;

pressKey: function (currentPianoKeyID)

var currentImage = this.control.content.findName("img" + currentPianoKeyID);

var currentMediaElement = this.control.content.findName(currentPianoKeyID);

// object.play()播放，object.pause()暫停，object.stop()停止

depressKey: function (currentPianoKeyID)

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)

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));

本文轉自webabcd 51CTO部落格，原文連結：http://blog.51cto.com/webabcd/345636，如需轉載請自行聯系原作者

穩紮穩打Silverlight(2) - 1.0執行個體之支援錄音和回放的鋼琴(Silverlight+ASP.NET AJAX+DLINQ)

繼續閱讀

Mac 神兵利器（一）極簡軟體清單

Postman 還能做自動化接口測試？早學會早下班……

小程式的新戰事

阿裡雲acp認證報名方法阿裡雲acp認證考試相關答疑

“雲釘一體”背後，阿裡雲希望改變什麼？

你的Idea還可用嗎？不妨試試另一個開發神器！一、STS安裝二、STS使用三、優化STS

【ECS常見問題】連接配接執行個體問題連接配接執行個體問題

用 Rust 重寫 Linux 核心，這可能嗎？挺進 Linux 世界，Rust 機會在哪？Linux 之父：驅動程式可能率先 Rust 化寫在最後：

Kafka 連接配接器使用與開發

IE new Date()無效

跨域問題總結

荷小魚 x mPaaS | 借助 H5 容器改善 App 白屏、浏覽器相容問題

AI驅動的Web App開發實戰

mPaaS 月度小報 | 3月發生的大事件

Android WebView 緻安卓應用閃退，mPaaS 助你規避這波 Bug

解讀 WebRTC 音頻 NetEQ 及優化實踐為什麼要 “白話” NetEQ?丢包、抖動和優化的了解NetEQ 及相關子產品NetEQ 内部子產品NetEQ 相關子產品優化點總結