Uwp——NaiveMediaPlayer

一、整体效果（请原谅我的渣画质）

image.png

这是播放mp4文件的时候，mp3文件的话中间就是白板了，太懒了背景就懒得找图片放了。最左边的＋按钮是打开mp3，mp4文件，play是控制暂停的，右边喇叭是调节音量的，虽然设计很反人类……（待会儿你就知道了）
我用的MediaElement，不如新版的MediaPlayerElement好用，我还在其它地方的代码看到过MediaPlayer声明变量的，最后又给指定成了MediaPlayerElement，反正就是乱七八糟的，我还是用最菜的那个吧。说MediaElement菜是因为相比最新的MediaPlayerElement，播放暂停，还有音量Slider控制都集成在里面了，弱鸡MediaElement还得自己定义，真的是麻烦（关键我还搞不定）
上述实现了要求的基本功能，播放mp3，mp4文件，虽然奇丑无比。
作业链接：https://github.com/XuweiC/NaiveUwp

二、思路浅谈

看到这个作业，毫无疑问的不知从何入手，我知道肯定有相关的类控件干这个事，但是我连它叫什么名字都不知道……所以就去这么搜Uwp--音乐播放器，然后见识了各种神仙的作品。反正我参考过的链接太多了，还有很多重样的，我是放不过来了，待会儿就几个技术问题放一下参考链接吧，应该没有人……就看三两个链接然后完工的吧，如果真有的话我敬他/她是条汉子。

①为了解决第一个打开文件的问题，我找到了以下传送门。

第一个链接：https://www.cnblogs.com/webabcd/archive/2013/01/24/2874156.html
文中如是说：重新想象 Windows 8 Store Apps (6) - 控件之媒体控件: Image, MediaElement……balabala
其实我是不纠结win8 win10什么的了，一开始反正什么都不懂，看就行了
代码如下：

// 播放本地视频或音频
        private async void btnPickFile_Click_1(object sender, RoutedEventArgs e)
        {
            FileOpenPicker picker = new FileOpenPicker();
            picker.SuggestedStartLocation = PickerLocationId.VideosLibrary;
            picker.FileTypeFilter.Add(".wmv");
            picker.FileTypeFilter.Add(".mp4");
            picker.FileTypeFilter.Add(".mp3");
            picker.FileTypeFilter.Add(".wma");
            picker.FileTypeFilter.Add(".png");
            var file = await picker.PickSingleFileAsync();
            if (file != null)
            {
                var stream = await file.OpenAsync(FileAccessMode.Read);
                // 指定需要让 MediaElement 播放的媒体流
                mediaElement.SetSource(stream, file.ContentType);
            }
        }
// 通过指定一个 url 播放一个网络视频
        private void btnPlayUrl_Click_1(object sender, RoutedEventArgs e)
        {
            mediaElement.Source = new Uri("http://media.w3.org/2010/05/sintel/trailer.mp4", UriKind.Absolute);
        }

基于以上代码，我写出了：

 private async void OpenFileButton_Click(object sender, RoutedEventArgs e)
        {
            FileOpenPicker picker = new FileOpenPicker();
            picker.SuggestedStartLocation = PickerLocationId.VideosLibrary;
            picker.FileTypeFilter.Add(".mp4");
            picker.FileTypeFilter.Add(".mp3");
            var file = await picker.PickSingleFileAsync();
            if (file != null)
            {
                var stream = await file.OpenAsync(FileAccessMode.Read);
                // 指定需要让 MediaElement 播放的媒体流
                mediaElement.SetSource(stream, file.ContentType);
            }
            mediaElement.Play();
        }

对我什么都没干，就把文件后缀名改掉了，同时忽视了url播放网络视频，因为添加源就可以了，我们要Naive一点的，就播放本地视频吧。

②为了解决第二个播放控制问题，我参考了以下链接。

我是真的服气！MediaElement真是废物！好了吐槽完了，我们来说说播放控制吧，因为上述过程结束之后需要一个简易的播放暂停按钮啊，再Naive也得要这个吧！所以我就在这条路上越走越远，什么音量了，滑块了，神烦。
第二道传送门：https://blog.csdn.net/linwh8/article/details/70314698
以及 https://www.cnblogs.com/tianma3798/p/5928217.html
第一个链接中代码如下

private void pause_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                if (_mediaTimelineController.State == MediaTimelineControllerState.Running)
                {
                    EllStoryboard.Pause();
                    _mediaTimelineController.Pause();
                }
                else
                {
                    //EllStoryboard.Resume();
                    EllStoryboard.Begin();
                    _mediaTimelineController.Resume();
                }
            }
            catch
            {

            }
        }

        private void start_Click(object sender, RoutedEventArgs e)
        {
            try
            {
                DispatcherTimer timer = new DispatcherTimer();
                timer.Interval = TimeSpan.FromSeconds(1);
                timer.Tick += timer_Tick;
                timer.Start();
                EllStoryboard.Begin();
                _mediaTimelineController.Start();
            }
            catch {

            }

        }

部分变量的解释我放在这里：

public sealed partial class MainPage : Page
    {
        MediaPlayer _mediaPlayer = new MediaPlayer();
        MediaTimelineController _mediaTimelineController = new MediaTimelineController();
        TimeSpan _duration;
        // MediaPlaybackSession _mediaPlaybackSession = new MediaPlaybackSession();
        public MainPage()
        {
            this.InitializeComponent();
            var mediaSource = MediaSource.CreateFromUri(new Uri("ms-appx:///Assets/Video1.MP4"));
            mediaSource.OpenOperationCompleted += MediaSource_OpenOperationCompleted;
            _mediaPlayer.Source = mediaSource;
            _mediaPlayer.CommandManager.IsEnabled = false;
            _mediaPlayer.TimelineController = _mediaTimelineController;
            //_mediaPlayer.Play();
            _mediaPlayerElement.SetMediaPlayer(_mediaPlayer);
        }

所以我理所当然的没学会，他用的就是上述我提到的mediaplayer，然后
_mediaPlayerElement.SetMediaPlayer(_mediaPlayer);……不提了不提了，都是泪。
然后我又找到了第二个链接，代码如下：

private void button_Click(object sender, RoutedEventArgs e)
{
    if (button.Content.ToString() == "播放")
    {
        button.Content = "暂停";
        mediaElement.Play();
    }
    else
    {
        button.Content = "播放";
        mediaElement.Pause();
    }
}

于是就有了我作业里的：

 private void PlayButton_Click(object sender, RoutedEventArgs e)
        {
            if (PlayButton.Content.ToString() == "Play")
            {
                PlayButton.Content = "Pause";
                mediaElement.Play();
            }
            else
            {
                PlayButton.Content = "Play";
                mediaElement.Pause();
            }
        }

尽管这样还会有一个小bug，我测试的时候先点的＋打开一个文件，然后按钮还是Play，点一下，没反应，再点一下，才能暂停，好了这个问题我们先不谈了。（MediaPlayerElement你是真的赖皮）

③音量控制问题

显然，MediaElement并没给配音量调节，所以为了解决这个问题，我第一个想到的是，我得做一个Slider，通过数据绑定让音量随滑块值的变化而变化，而且点击喇叭之后出现滑块，也就是可以用一个flyout。
理想当然丰满，结果是我做了一个反人类的音量调节器……flyout也由于没有搞定滑块数据绑定而无心再弄，以及被MediaPlayerElement气得半死。
我的音量调节功能是我自己瞎捣鼓的，代码如下：

public void Volumn_ValueChanged(object sender, RoutedEventArgs e)
       {
           
       }
       private void VoiceButton_Click(object sender, RoutedEventArgs e)
       {
           mediaElement.Volume = Volumn.Value;
           //mediaElement.Volume = {Binding value, ElementName=Volumn};
       }

你一眼就能看到我把音量调节放在了Click里，也就是说拖动滑块，然后点击那个喇叭，然后就完成了音量调节功能了，本来这里应该放置静音功能的。结果调节没搞成，然后就成这样了。
以下是我在搜集资料时候参考的部分链接： uwp开发：Slider控件和MediaElement绑定，实现拖动播放。
哼，你说为什么没有Slider&音量控制这个选项？因为MediaPlayerElement已经完成这件事了！倒是进度条拖动控制视频播放进度的东西有一堆，用的是一个叫做转换器的东西。
参考代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml.Data;

namespace Homework8.Converter
{
    class timeLineConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            return ((TimeSpan)value).TotalSeconds;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            return TimeSpan.FromSeconds((double)value);
      }
    }
}

总结：在实现Naive播放器的时候，我遇到的就是以上几个问题，MediaPlayerElement选手们，嫉妒使我面目狰狞。这告诉我们以后要实现什么功能的时候要去找找那些主流的控件/工具，这能省大力气！其实一个用户交互体验好，干净、功能齐全的音乐播放器还是挺复杂的，这次我对那些控件的使用有了更多的理解，参考官方文档也能学到很多东西，比如：
https://docs.microsoft.com/zh-cn/windows/uwp/design/controls-and-patterns/media-playback

2018-04-02