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按钮。 实战 好,理论知识准备完毕,让我们开始制作。首先,绘制一个5行3列的Grid。 为了固定播放器的大小,只有最后一行和最后一列没有锁定宽和高。第四行添加了一个方向为水平的StackPanel,并且添加了各个按钮。界面完成以后,用Visual Studio打开项目,双击Play按钮,添加事件处理程序: view sourceprint?1 private void btnStart_Click(object sender, RoutedEventArgs e)<BR> {<BR> Button self = sender as Button;<BR> if (self.Content.ToString().ToUpper() == "PLAY")<BR> {<BR> sldProgress.Maximum = mdeMusic.NaturalDuration.TimeSpan.TotalSeconds;<BR> self.Content = "Pause";<BR> mdeMusic.Play();<BR> }<BR> else<BR> {<BR> mdeMusic.Pause();<BR> self.Content = "Play";<BR> }<BR> } 这里,我们通过判断按钮的Content是否为“Play”来判断当前按钮的功能。当为“Play”时,我们为大的进度滑块设置最大值——整个音乐的全部秒数,然后把按钮上的文字改成“Pause”,并开始播放音乐。而当按钮上的文字不为“Play”时,调用Pause方法将播放暂停,并且再次把按钮上的文字改成“Play”。 Stop按钮的功能很直接,把“Play”按钮上的字改为“Play”,并且调用MediaElement的Stop方法将播放停止。 Mute按钮其实相当于一个CheckBox,或者一个乒乓键,因此,每次点击,我们只需要将逻辑值置返即可: view sourceprint?1 private void btnMute_Click(object sender, RoutedEventArgs e)<BR> {<BR> mdeMusic.IsMuted = !mdeMusic.IsMuted;<BR> } Volume的滑块只需要设置其最大值为1并且绑定即可: view sourceprint?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接口了: view sourceprint?1 public class ProgressConverter : IValueConverter<BR> {<BR> public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)<BR> {<BR> return ((TimeSpan)value).TotalSeconds;<BR> }<BR><BR> public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)<BR> {<BR> return TimeSpan.FromSeconds((double)value);<BR> }<BR> } 其中,Convert实现正向转换;ConvertBack则实现逆向的转换。有了转换器,我们便可以把MediaElement的Position和进度滑块绑定起来了: view sourceprint?1 <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事件的处理程序: view sourceprint?1 public MainPage()<BR> {<BR> // Required to initialize variables<BR> InitializeComponent();<BR> tbMusicName.Text = "Guo Qiao";<BR> mdeMusic.MediaEnded += new RoutedEventHandler(mdeMusic_MediaEnded);<BR> } 然后,在事件处理程序中,将播放按钮复原: view sourceprint?1 void mdeMusic_MediaEnded(object sender, RoutedEventArgs e)<BR> {<BR> btnStart.Content = "Play";<BR> sldProgress.Value = 0;<BR> } 写在最后: Silverlight通过MediaElement类为多媒体支持,通过其内置的方法、属性和事件,基本上可以完成一个在线音乐播放器的所有功能。可惜Silverlight不能访问本地文件,否则,做一个Web版的本地播放器也是一件很Cool的事情:-)。 Little knowledge is dangerous.
转载于:https://www.cnblogs.com/zjutsxj/archive/2010/05/25/1743385.html