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
网友评论