代码改变世界

简单的Silverlight音乐播放器Widget

2008-06-26 09:33  Windie Chai  阅读(4270)  评论(15编辑  收藏
上周尝试了一下发布不久的Silverlight 2 beta2,设计了这么一个简单的播放器widget。它支持循环播放,支持自动播放,支持封面图片,支持暂停(鼠标移动到封面上就会淡入按钮)。
本来是想设计的稍微酷一点的,发现Silverlight2的矩阵变形能力还是相当弱的,其实现的功能也就是平移、平行四边形化和旋转,如果再支持梯形化就好了。


发现Silverlight 2 beta2相对beta1的一些小变化:

1.字体优化,beta1总算支持了中文显示,但却显示的非常别扭。
一句话会出现两种字体,貌似规律是这样的,如果某个汉字的繁简体一样的话,那么这个汉字在Silverlight中显示为黑体,否则为宋体。
其实微软的网站上早就有这样的先例,譬如下图:


2.Image不再像之前那样使用依赖属性赋一个Uri就可以了,而是变成了下面的样子: 
BitmapImage bmp = new BitmapImage(); 
bmp.UriSource 
= new Uri(cover); 
this.img_Cover.Source = bmp;

3.另外,之前基于beta1制作的饭否widget无法编译通过了,在异步调用的方法中,似乎无法直接操作控件的属性了,不知何解。

OK。如果你也想在blog上添加这个widget,那么编辑主题,在相应的位置加入以下代码:
<object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="140" height="160">
<param name="source" value="http://blog.windstyle.cn/wp-content/uploads/2008/06/windstyleplayer.xap"/>
<param name="onerror" value="onSilverlightError" />
<param name="InitParams" value="music=http://lqyy.cnlu.net/UploadFile/2008-4/200841718293180.mp3,cover=http://img.verycd.com/post_thumbs/0804/post-511307-1208867652_thumb.jpg,title=鸿雁 - 额尔古纳乐队,auto=true,loop=true" />
<param name="background" value="#09182A" />
<href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
</a>
</object>

稍微介绍一下InitParams的配置就可以了,它包含了音乐url(music)、封面url(cover)、标题(title)、自动播放(auto)和循环(loop),各个参数之间用半角逗号分割即可。

点击下载示例源码