Silverlight 学习笔记——用MediaElement制作在线音乐播放器
2010-01-15 19:47
417 查看
Silverlight的一个很大的特性就是针对多媒体内容,包括音频和视频的支持。在Silverlight中,多媒体内容通过窗口MediaElement来呈现。让我们通过实现一个在线音乐播放器,来学习MediaElement对于音频的支持特性。
首先通过Blend Sketch来打个草稿,规划一下最终要实现的界面和功能:
Start按钮,开始播放;按钮变成Pause,用于暂停;(实现时,改为了Play按钮);
Stop按钮,停止播放;
Mute按钮,静音;
Volume和Balance两个滑条分别控制音量和左右平衡。
MediaElement类中提供的方法、属性和事件,可以为我们实现以上全部的功能:
方法:
Play
从媒体当前位置开始播放。这个方法可以实现Start按钮播放部分的功能;
Pause
将媒体暂停在当前位置。当用户按下播放以后,播放按钮就会变成暂停按钮,当用户点击暂停按钮就,调用此方法将正在播放的歌曲停住。
Stop
将媒体停止并且重置至起始位置。正好对应了Stop按钮的功能。
属性:
AutoPlay,bool类型
设置或者获取添加完Source时,是否自动播放。由于我们期望用户点击Start按钮时才进行播放,因此,这处需要将其设置为false。
Balance,double类型
设置或者获取扬声器平衡。数值区间:-1~1。用于绑定Balance滑块。
IsMute,bool类型
设置或者获取是否静音,我们通过Mute按钮设置其值。
Position,TimeSpan类型。
通过时间设置或者获取播放中媒体当前的位置。歌曲进度可以通过获取MeidaElement.Position属性中的TotalSeconds来实现,这里有一个小技巧,设置时,可以通过TimeSpan.FromSeconds方法来进行。由于Position是TimeSpan类型的,而滑动条的Value是double值,因此,在绑定的时候,需要引入一个转换器Converter。这将在后面的代码中有所体现。
Source,System.Uri类型
提供媒体源。指向要播放的音乐文件或者播放列表。
Volume,double类型
设置或者获取音量。用于绑定到Volume滑块。
事件:
MediaFailed
设置Source失败时触发。为了简化,这里使用了一个固定的文件,因此,也没有考虑载入失败的问题。这个事件也没有被用到。另外,如果Source指向一个无效的路径,默认情况下,Silverlight会触发这个事件但是不会抛出异常。因此,如果载入文件失败时需要抛出异常,我们需要手动的在MediaFailed事件处理程序中创建并抛出异常。
MediaEnded
媒体播放完成时触发。当一首歌曲播放完成时,需要将界面复原,例如,将Pause按钮还原为Start按钮。
为了固定播放器的大小,只有最后一行和最后一列没有锁定宽和高。第四行添加了一个方向为水平的StackPanel,并且添加了各个按钮。界面完成以后,用Visual Studio打开项目,双击Play按钮,添加事件处理程序:
这里,我们通过判断按钮的Content是否为“Play”来判断当前按钮的功能。当为“Play”时,我们为大的进度滑块设置最大值——整个音乐的全部秒数,然后把按钮上的文字改成“Pause”,并开始播放音乐。而当按钮上的文字不为“Play”时,调用Pause方法将播放暂停,并且再次把按钮上的文字改成“Play”。
Stop按钮的功能很直接,把“Play”按钮上的字改为“Play”,并且调用MediaElement的Stop方法将播放停止。
Mute按钮其实相当于一个CheckBox,或者一个乒乓键,因此,每次点击,我们只需要将逻辑值置返即可:
Volume的滑块只需要设置其最大值为1并且绑定即可:
Blalance滑块依样画瓢,不再赘述。
最后,我们要把Position绑定到进度滑块上。做个简单的分析,这里,MediaElement的Position相当于模型,而Slider的Value即是控件上需要绑定的值。当从模型向控件绑定时,我们需要从TimeSpan中提取出总的秒数,提供给滑快的Value。而从控件到模型时,又需要把Value这个double类型的数值,设置成Position当前的秒数。因此,正向时,需要把TimeSpan转换成double,反向时则反过来。由此,便可以实现IValueConverter接口了:
其中,Convert实现正向转换;ConvertBack则实现逆向的转换。有了转换器,我们便可以把MediaElement的Position和进度滑块绑定起来了:
让我们运行项目,效果如下:
一曲放完,我们发现,Play按钮没有返回到原来的状态,仍然是Pause,这显然不是我们想要的效果,因此,我们还需要做些手脚。首先,在MainPage的构造函数中添加MediaElement的MediaEnded事件的处理程序:
然后,在事件处理程序中,将播放按钮复原:
首先通过Blend Sketch来打个草稿,规划一下最终要实现的界面和功能:
播放器功能:
大进度条,用于追踪歌曲的播放进度,并且可以通过拖放来定位到歌曲的不同位置;Start按钮,开始播放;按钮变成Pause,用于暂停;(实现时,改为了Play按钮);
Stop按钮,停止播放;
Mute按钮,静音;
Volume和Balance两个滑条分别控制音量和左右平衡。
MediaElement类中提供的方法、属性和事件,可以为我们实现以上全部的功能:
方法:
Play
从媒体当前位置开始播放。这个方法可以实现Start按钮播放部分的功能;
Pause
将媒体暂停在当前位置。当用户按下播放以后,播放按钮就会变成暂停按钮,当用户点击暂停按钮就,调用此方法将正在播放的歌曲停住。
Stop
将媒体停止并且重置至起始位置。正好对应了Stop按钮的功能。
属性:
AutoPlay,bool类型
设置或者获取添加完Source时,是否自动播放。由于我们期望用户点击Start按钮时才进行播放,因此,这处需要将其设置为false。
Balance,double类型
设置或者获取扬声器平衡。数值区间:-1~1。用于绑定Balance滑块。
IsMute,bool类型
设置或者获取是否静音,我们通过Mute按钮设置其值。
Position,TimeSpan类型。
通过时间设置或者获取播放中媒体当前的位置。歌曲进度可以通过获取MeidaElement.Position属性中的TotalSeconds来实现,这里有一个小技巧,设置时,可以通过TimeSpan.FromSeconds方法来进行。由于Position是TimeSpan类型的,而滑动条的Value是double值,因此,在绑定的时候,需要引入一个转换器Converter。这将在后面的代码中有所体现。
Source,System.Uri类型
提供媒体源。指向要播放的音乐文件或者播放列表。
Volume,double类型
设置或者获取音量。用于绑定到Volume滑块。
事件:
MediaFailed
设置Source失败时触发。为了简化,这里使用了一个固定的文件,因此,也没有考虑载入失败的问题。这个事件也没有被用到。另外,如果Source指向一个无效的路径,默认情况下,Silverlight会触发这个事件但是不会抛出异常。因此,如果载入文件失败时需要抛出异常,我们需要手动的在MediaFailed事件处理程序中创建并抛出异常。
MediaEnded
媒体播放完成时触发。当一首歌曲播放完成时,需要将界面复原,例如,将Pause按钮还原为Start按钮。
实战
好,理论知识准备完毕,让我们开始制作。首先,绘制一个5行3列的Grid。为了固定播放器的大小,只有最后一行和最后一列没有锁定宽和高。第四行添加了一个方向为水平的StackPanel,并且添加了各个按钮。界面完成以后,用Visual Studio打开项目,双击Play按钮,添加事件处理程序:
private void btnStart_Click(object sender, RoutedEventArgs e) { Button self = sender as Button; if (self.Content.ToString().ToUpper() == "PLAY") { sldProgress.Maximum = mdeMusic.NaturalDuration.TimeSpan.TotalSeconds; self.Content = "Pause"; mdeMusic.Play(); } else { mdeMusic.Pause(); self.Content = "Play"; } }
这里,我们通过判断按钮的Content是否为“Play”来判断当前按钮的功能。当为“Play”时,我们为大的进度滑块设置最大值——整个音乐的全部秒数,然后把按钮上的文字改成“Pause”,并开始播放音乐。而当按钮上的文字不为“Play”时,调用Pause方法将播放暂停,并且再次把按钮上的文字改成“Play”。
Stop按钮的功能很直接,把“Play”按钮上的字改为“Play”,并且调用MediaElement的Stop方法将播放停止。
Mute按钮其实相当于一个CheckBox,或者一个乒乓键,因此,每次点击,我们只需要将逻辑值置返即可:
private void btnMute_Click(object sender, RoutedEventArgs e) { mdeMusic.IsMuted = !mdeMusic.IsMuted; }
Volume的滑块只需要设置其最大值为1并且绑定即可:
<Slider x:Name="sldVolumn" Style="{StaticResource SliderPlayers}" Value="{Binding Volume, ElementName=mdeMusic, Mode=TwoWay, UpdateSourceTrigger=Default}" Maximum="1" LargeChange="0.1" SmallChange="0.01" />
Blalance滑块依样画瓢,不再赘述。
最后,我们要把Position绑定到进度滑块上。做个简单的分析,这里,MediaElement的Position相当于模型,而Slider的Value即是控件上需要绑定的值。当从模型向控件绑定时,我们需要从TimeSpan中提取出总的秒数,提供给滑快的Value。而从控件到模型时,又需要把Value这个double类型的数值,设置成Position当前的秒数。因此,正向时,需要把TimeSpan转换成double,反向时则反过来。由此,便可以实现IValueConverter接口了:
public class ProgressConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { return ((TimeSpan)value).TotalSeconds; } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { return TimeSpan.FromSeconds((double)value); } }
其中,Convert实现正向转换;ConvertBack则实现逆向的转换。有了转换器,我们便可以把MediaElement的Position和进度滑块绑定起来了:
<Slider x:Name="sldProgress" Grid.Column="1" Grid.Row="2" Minimum="0" Value="{Binding ElementName=mdeMusic, Path=Position, Mode=TwoWay, Converter={StaticResource PrgConverter}}" LargeChange="10" />
让我们运行项目,效果如下:
一曲放完,我们发现,Play按钮没有返回到原来的状态,仍然是Pause,这显然不是我们想要的效果,因此,我们还需要做些手脚。首先,在MainPage的构造函数中添加MediaElement的MediaEnded事件的处理程序:
public MainPage() { // Required to initialize variables InitializeComponent(); tbMusicName.Text = "Guo Qiao"; mdeMusic.MediaEnded += new RoutedEventHandler(mdeMusic_MediaEnded); }
然后,在事件处理程序中,将播放按钮复原:
void mdeMusic_MediaEnded(object sender, RoutedEventArgs e) { btnStart.Content = "Play"; sldProgress.Value = 0; }
写在最后:
Silverlight通过MediaElement类为多媒体支持,通过其内置的方法、属性和事件,基本上可以完成一个在线音乐播放器的所有功能。可惜Silverlight不能访问本地文件,否则,做一个Web版的本地播放器也是一件很Cool的事情:-)。相关文章推荐
- Silverlight 学习笔记——用MediaElement制作在线音乐播放器
- 学习笔记3--CSS制作鼠标放上后淡入透明遮罩层效果
- 移植u-boot学习笔记10-----支持烧写yaffs映象及制作补丁
- Silverlight学习笔记九ListBox控件
- arduino学习笔记2 - 制作第一个电路 单led闪烁
- Daikon Forge 学习笔记(二)之 图集与字体集的制作
- Silverlight学习笔记--绘制与着色(下)
- Silverlight 2.0 学习笔记——RIAs
- 强大的DataGrid组件[7]_自定义DataGrid——Silverlight学习笔记[15]
- SilverLight学习笔记--Silverlight中INotifyPropertyChanged 接口在数据绑定中的使用
- Silverlight学习笔记:布局之stackpanel
- Silverlight 2学习教程(七):在Silverlight 2.0中制作资源加载进度条
- dev c++ dll 制作与调用学习笔记
- Silverlight学习笔记--文字对象
- Silverlight学习笔记三:表格控件DataGrid
- Silverlight学习笔记(1)——样式的运用
- Unity学习笔记2 简易2D横版RPG游戏制作(二)
- SilverLigth学习笔记--控制 Silverlight控件样式(转)
- AJAX学习笔记之 制作自动校验的表单
- 关于Axuer7.0高级交互设计学习笔记——如何制作复选框的全部选中效果