创造2018--UWP进阶探索之媒体播放器的实现

点击这里转到我的Github查看本项目源代码
https://github.com/Needer28/naivePlayer

前言

在媒体播放器之前认真了解了老师对我们的要求，其中视频播放的实现其实并不难，对于C#来讲不过是一个控件的问题
之前也用C#实现郭类似的共能，但是只是将资源文件放在Assets文件夹下，并没有实现资源文件自由选取，且实现.mp3和.mp4文件的自由选取，这是此次作业的重点吧

无论什么时候，官方文档永远是最好的选择

Chapter 1--实现的功能

• 允许用户选择.mp3或.mp4文件
• 相应播放文件
• 拖动实现快进或返回
• 适应屏幕宽度
• 音量调整
• 纵横比调整

虽然直接把控件拖拽过去就有这些功能，除了文件选择！

MP3及MP4文件的选取

MP3文件(超能陆战队主题曲immortals)播放示例

虽然什么都看不到，也听不到，但是它就是超能陆战队主题曲immortals

MP4文件(超能陆战队)播放示例

这个可以看到，是超能陆战队，没错我就是用自己制作的播放器把超能陆战队看完的

Chapter 2--技术细节

其实说实话，制作这个媒体播放器我是真的没有遇到什么困难，但是有一些点还是需要我们注意下或者需要我们可能参考到的

技术问题：FileOpenPicker的使用

起初我以为在XAML的控件当中会有这么一个文件选取器，但是我还是高估了XAML所能实现的功能，于是文件选取器就先被我放在一边没有，先是在XAML Controls Gallery当中查看了 MediaElement的使用，并通过它找到微软官方的极其详细方便的文档。
MediaElement Class官方文档点这里

在浏览官方文档的时候，我突然就发现了这么一个method——SetSourse，然后冥冥之中就是感觉这就是我要的，然后就顺理成章地把这么一个文件选取的功能实现
MediaElement.SetSource(IRandomAccessStream, String) Method官方文档点这里

MediaElement下的SetSourse方法

所以呢，又是顺理成章地，我突然发现SetSourse中有这么一个例子

SetSourse方法中的良心示例

XAML

C#

async private void SetLocalMedia()
{
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

    openPicker.FileTypeFilter.Add(".mp4");//这两句实现了文件过滤
    openPicker.FileTypeFilter.Add(".mp3");

    var file = await openPicker.PickSingleFileAsync();

    // mediaControl is a MediaElement defined in XAML
    if (null != file)
    {
        var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
        mediaControl.SetSource(stream, file.ContentType);//这个应该叫数据绑定？
        mediaControl.Play();
    }
}

没错，就是这么简单，微软官方的文档简直良心

Chapter 2--我的实现

其实呢，我的实现基本上基于以上微软官方文档给的示例，无非是拖拽了一个MediaElement控件，加了一个Button，并通过其click方法调用文件选取器部分代码
我的XAML代码

XAML代码中添加了一个MediaElement用来播放媒体文件，一个Button用调用文件选取其部分代码

我的C#代码

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace naivePlayer
{
    /// 

    /// 可用于自身或导航至 Frame 内部的空白页。
    /// 
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        async private void SetLocalMedia()
        {
            var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
            openPicker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;//使用图片缩略图创建丰富的视觉显示
            openPicker.SuggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.PicturesLibrary;

            openPicker.FileTypeFilter.Add(".mp4");//确定选取文件的后缀名
            openPicker.FileTypeFilter.Add(".mp3");

            var file = await openPicker.PickSingleFileAsync(); //选取单个文件

            // mediaPlayer is a MediaElement defined in XAML
            if (null != file)
            {
                var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
                mediaPlayer.SetSource(stream, file.ContentType);
                mediaPlayer.Play();
            }
        }

        private void filePicker_Click(object sender, RoutedEventArgs e) //此处通过点击事件调用了
                                                                        // SetLocalMedia()来显示文件选取器
        {
            SetLocalMedia();
        }
    }
}

C#代码中按照微软官方文档的样子写了一个SetLocalMedia()方法用来实现一个文件选取器，实现了一个filePicker_Click(object sender, RoutedEventArgs e)方法用来通过点击事件调用SetLocalMedia()方法

Chapter 3--未来的展望

其实本次实现的播放器只是把老师要求的功能实现了，还有很多不能尽如人意的地方，比如，当我打开一个MP3文件时，只能看到一个进度条在不断的动，连我打开的是那首歌都看不到，这是不能令我满意的，针对这个缺陷，日后可以考虑加一个TextBlock显示打开的文件名

总之，需要改进的地方还有很多，不令人满意的地方也还有很多，我想对于用户来说，只有功能绝对不够，要怎么让我们的软件更方便、更易于使用才是我们开发者需要追寻的目标

后语

需要学的还有很多，有很多功能我们只会做也不够，怎么做好才是我们真正需要考虑的问题

欢迎大家关注我的微信公众号“NEU学堂”

学堂君欢迎你的到来

~~虽然小编经常托更，而且一托就是好几个月，但这并不妨碍它是一个极好的公众号~~