【作业】暴走可视化_简单多媒体

预览

Github多媒体播放器

最终效果

选择：

 

mp4:

mp3:

技术问题

文件选择　　

　　媒体播放，打开本地文件似乎是一个问题，于是我参考了uwp控件Open file and folders with a picker中找到了 Pick a single file: complete code listing代码如下：

var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;
picker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;
picker.FileTypeFilter.Add(".jpg");
picker.FileTypeFilter.Add(".jpeg");
picker.FileTypeFilter.Add(".png");

Windows.Storage.StorageFile file = await picker.PickSingleFileAsync();
if (file != null)
{
// Application now has read/write access to the picked file
this.textBlock.Text = "Picked photo: " + file.Name;
}
else
{
this.textBlock.Text = "Operation cancelled.";
}

 

 因为作业要求为打开.mp3和.mp4文件，所以我稍作修改，如下所示：

FileOpenPicker openPicker = new FileOpenPicker();
openPicker.ViewMode = PickerViewMode.Thumbnail;
openPicker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
openPicker.FileTypeFilter.Add(".mp3");
openPicker.FileTypeFilter.Add(".mp4");

StorageFile file = await openPicker.PickSingleFileAsync();
if (file != null)
{
mediaPlayer.Source = MediaSource.CreateFromStorageFile(file);
Tips.Text = file.DisplayName; //显示文件名字
}
else
{
Tips.Text = "Invalid File!";
}

 

我用了一个button来点击产生文件选择事件，所以上述内容放在函数中：

private void button_Click(object sender, RoutedEventArgs e)
{

}

 

vs提示：await只能运行在异步方法中，根据自动提示功能做了修改，如下：

private async System.Threading.Tasks.Task AppBarButton_ClickAsync(object sender, RoutedEventArgs e)

 

但是又被提示button_Click方法返回值类型不匹配,经过大半夜的折磨，终于在一篇博客中发现如下代码：

rivate async void add_Click(object sender, RoutedEventArgs e)
{
var openPicker = new FileOpenPicker();
 
openPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.VideosLibrary;
openPicker.FileTypeFilter.Add(".mp4");
openPicker.FileTypeFilter.Add(".mp3");
 
StorageFile file = await openPicker.PickSingleFileAsync();
if (file != null)
{
var mediaSource = MediaSource.CreateFromStorageFile(file);
Title.Text = file.Name;
myPlayer.Source = mediaSource;
mediaSimple.SetMediaPlayer(myPlayer);
if (file.FileType == ".mp3")
{
//Todo 播放音频时显示专辑封面旋转
//可通过 Ellipse 实现
}
}
}

 

我发现函数只需要用async修饰，而不需要将返回值类型变为task，最终发现的vs提示的多此一举，似乎也对得起我逝去的秀发。

 

视频播放

　　因为用到了视频播放，我在XAML Contral Gallery中找到了MediaElement和MediaPlayerElement，版本问题，选择了后者。但是介绍很不详细，举例单一，只得上学习使用了MediaPlayerElement。找到如下代码：

<MediaPlayerElement x:Name="mediaPlayer"
          Source="ms-appx:///Media/video1.mp4"
          AreTransportControlsEnabled="True" />

 

　　稍加改动：

<MediaPlayerElement Name="mediaPlayer" 
AutoPlay="True" 
AreTransportControlsEnabled="True" 
HorizontalAlignment="Center" 
Grid.Row="2">
</MediaPlayerElement>

 

做一个整洁干净有好习惯的人

还碰到一个哭笑不得的问题，刚开始处于软件的测试阶段，我并没有设计Grid，只加入了button和textblock用来选择文件以及返回选择结果。代码如下：

<Button Click="button_Click"
x:Name="button" 
Content="fileOpen" 
VerticalAlignment="Stretch">
</Button>

<TextBlock x:Name="Tips" ></TextBlock>

然而，在软件界面button一直是灰色的，没法点击，一夜白了少年头。终于高人指点，可能是因为text block和button都没有设置位置，两个控件重叠了，所以button没反应。醍醐灌顶，恍然大悟的快感让我差点砸了电脑。

 

感悟

　　一个简单的多媒体软件，却困难重重，也让我瞬间明白了人与人的差距，平时练习太少，在作业上体现的极为明显。在着深夜的灯光下，看着桌子上一根根秀发，我下定决心好好学习，让我有了清醒的自我认知或许是这次作业最大的收获。