當我看到na?ve media player這個作業的時候，我自信一笑，不就是從文件裏選擇然後放個.mp3或.mp4格式的媒體嗎，這不可能難倒我的，我打開vs，新建了一個項目，然後，嗯…第一行代碼該打啥呢？

好了皮完了很快樂我們言歸正傳，這個媒體播放器在主要功能上只要解決兩個問題就可以了： 一.選取一個文件 二.播放媒體。 （反正是na?ve模式就讓我忽略我幾乎沒有的UI吧！）

技術問題一：如何讓用戶選擇文件

解決過程：萬事百度為先！翻了好幾個頁面，選定了FileOpenPicker，然後從官網FileOpenPicker和這個博客扒下來兩段代碼，融合了一下形成了我的初版代碼。

FileOpenPicker：

 1 FileOpenPicker openPicker = new FileOpenPicker();
 2 
 3 openPicker.ViewMode = PickerViewMode.Thumbnail;
 4 
 5 openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
 6 
 7 openPicker.FileTypeFilter.Add(".jpg");
 8 
 9 openPicker.FileTypeFilter.Add(".jpeg");
10 
11 openPicker.FileTypeFilter.Add("
 
.png");
12 
13  
14 
15 StorageFile file = await openPicker.PickSingleFileAsync();
16 
17 if (file != null)
18 
19 {
20 
21     // Application now has read/write access to the picked file
22 
23     OutputTextBlock.Text = "Picked photo: " + file.Name;
24 
25 }
26 
27 else
28 
29 {
30 
31     OutputTextBlock.Text = "
 
Operation cancelled.";
32 
33 }

博客：

 1 var picker = new Pickers.FileOpenPicker();
 2 
 3 picker.ViewMode = Pickers.PickerViewMode.Thumbnail;
 4 
 5 picker.SuggestedStartLocation = Pickers.PickerLocationId.PicturesLibrary;
 6 
 7  
 8 
 9 picker.FileTypeFilter.Add(".jpg");
10 
11 picker.FileTypeFilter.Add(".jpeg");
12 
13 picker.FileTypeFilter.Add(".png");
14 
15 
16 Windows.Storage.StorageFile file = await picker.PickSingleFileAsync();
17 
18 if (file != null)
19 
20 {
21 
22     // Application now has read/write access to the picked file
23 
24     this.textBlock.Text = "Picked photo: " + file.Name;
25 
26 }
27 
28 else
29 
30 {
31 
32     this.textBlock.Text = "Operation cancelled.";
33 
34 }

把上面兩個代碼改了改，形成了我的：

 1 var picker = new Pickers.FileOpenPicker();
 2 
 3 picker.ViewMode = Pickers.PickerViewMode.Thumbnail;
 4 
 5 picker.SuggestedStartLocation = Pickers.PickerLocationId.PicturesLibrary;
 6 
 7  
 8 
 9 picker.FileTypeFilter.Add(".jpg");
10 
11 picker.FileTypeFilter.Add(".jpeg");
12 
13 picker.FileTypeFilter.Add(".png");
14 
15  
16 
17  
18 
19 Windows.Storage.StorageFile file = await picker.PickSingleFileAsync();
20 
21 if (file != null)
22 
23 {
24 
25     // Application now has read/write access to the picked file
26 
27     this.textBlock.Text = "Picked photo: " + file.Name;
28 
29 }
30 
31 else
32 
33 {
34 
35     this.textBlock.Text = "Operation cancelled.";
36 
37 }

呵，凡人，你還敢再多一點error嗎？不過好在vs有自動修改功能，so easy~

改完了：

 1 var picker = new Windows.Storage.Pickers.FileOpenPicker();
 2 
 3             picker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;
 4 
 5             picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
 6 
 7  
 8 
 9             picker.FileTypeFilter.Add(".mp3");
10 
11             picker.FileTypeFilter.Add(".mp4");
12 
13             Windows.Storage.StorageFile file = await picker.PickSingleFileAsync();
14 
15             if (file != null)
16 
17             {
18 
19                 // Application now has read/write access to the picked file
20 
21                 FileName.Text = "正在播放 " + file.Name;
22 
23             }
24 
25             else
26 
27             {
28 
29                 FileName.Text = "Operation cancelled.";
30 
31             }

這個時候會顯示還有一處錯誤：await， 在事件入口前面加個async就行了：

private async void FileButton_Click(object sender, RoutedEventArgs e) 

這樣，我的第一步就完成了~

技術問題二：播放媒體

解決過程：從XAML controls gallery 翻出來Media Element，直接用的軟件裏給的參考代碼：

1 <MediaElement Source="/Assets/ladybug.wmv"
2 
3 MaxWidth="400"
4 
5 AutoPlay="False"
6 
7 AreTransportControlsEnabled="True" /> 

把自己的文件拖進assets，稍微改一下代碼：

1 <MediaElement Source="/Assets\roseonly.mp4"
2 
3               MaxWidth="1600"
4 
5               AutoPlay="False"
6 
7               AreTransportControlsEnabled="True" />

運行！

一個簡單的UI，Grid分三行，0行嵌套一個RelativePanel放置和文件相關控件，1行放mediaElement。乍一看挺好的，仔細一想，我設計了兩個毫無關系的模塊啊！於是：

技術問題三：把兩個模塊連接起來

解決過程：

忽略中間一系列波折的過程，我回歸了官方文檔的懷抱：

 1 if (null != file)
 2 
 3     {
 4 
 5         var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
 6 
 7         mediaControl.SetSource(stream, file.ContentType);
 8 
 9         mediaControl.Play();
10 
11 }

我的代碼:

 1 if (file != null)
 2 
 3             {
 4 
 5                 // Application now has read/write access to the picked file
 6 
 7                 FileName.Text = "正在播放 " + file.Name;
 8 
 9                 var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
10 
11                 naiveMediaplayer.SetSource(stream, file.ContentType);
12 
13                 naiveMediaplayer.Play();

OK！

總結：其實開始以為會很難，腦子裏都大致想了想要用好多個按鈕，每個按鈕控制不同的事件，比如開始，暫停等等；音量控制還得用滑塊...沒想到打代碼的時候直接拖一個MediaElement就都解決了，開心，感覺受到了很好的對待哈哈。

不過現在實現的功能還是很局限的啦，比如我視頻播放的時候就有進度條等等，但音頻就啥都沒有也是很尷尬，查了一下感覺只有我遇到了這個困難啊！還是沒太弄清楚原理（畢竟我視頻音頻完全是同一段代碼，它這樣區別對待我還是有一點無措），希望之後能弄懂吧~

UWP學習之路-naive media player1