稳扎稳打Silverlight(2) - 1.0实例之支持录音和回放的钢琴(Silverlight+ASP.NET AJAX+DliNQ)
作者：webabcd
介绍
用Silverlight 1.0实现一个可以用鼠标或键盘d奏，并且支持录音和回放的钢琴。(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( 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" >
<script type="text/JavaScript">
var txtinput = '<%= txtinput.ClIEntID %>';
var txtname = '<%= txtname.ClIEntID %>';
createSilverlight();
</script>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<Progresstemplate>
<div >
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 >
<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( 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)全部内容，希望文章能够帮你解决稳扎稳打Silverlight(2) - 1.0实例之支持录音和回放的钢琴(Silverlight+ASP.NET AJAX+DLINQ)所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）