Silverlight 学习笔记——用MediaElement制作在线音乐播放器

　　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.

Silverlight 学习笔记——用MediaElement制作在线音乐播放器 - Evil 域 - 博客园