Xungerrrr's Blog

UWP - Media Player

Word count: 790Reading time: 2 min
2018/05/05 Share

实验步骤

  1. 在Visual Studio中新建Media Player项目,创建Player页面;
  2. 在Player页面中使用Grid布局页面,第一行放置MediaPlayerElement以及包含歌曲标题和封面的StrollViewer等元素,第二行放置自行设计的媒体控制栏,其中包含媒体进度条、开始暂停按钮、停止按钮、选取文件按钮、全屏按钮等元素。
  3. 在cs文件中,使用MediaPlayer和MediaTimelineController控制媒体播放,并在相关函数中实现读取文件、提取媒体信息、绑定媒体位置与进度条位置、控制封面旋转动画等功能。

关键步骤截图

图1. 音乐播放器启动界面:

图2. 音乐播放示例:

图3. 视频播放示例:

亮点与改进

  1. 选择本地媒体的功能

    媒体播放器实现了选择本地媒体的功能,能够打开本地的音乐和视频进行播放。

  2. 美化界面

    设计上,加入了很有质感的Acrylic材质,使应用透明化。在媒体播放器中播放音乐时,专辑封面会做毛玻璃模糊处理,使应用背景能够根据专辑封面动态改变。另外,用Acrylic材质实现了媒体控制栏颜色自动跟随系统主题颜色。

    注:要实现此效果,必须使用最新版Windows 10 SDK(版本16299)生成解决方案,否则会提示找不到相关资源,无法运行。

  3. 实现封面旋转

    在播放音乐时,封面旋转;播放结束时,封面复位;暂停时,封面的旋转动作暂停;在播放视频时,封面隐藏。

  4. 显示媒体的缩略图、标题、艺术家、专辑等信息

    实现了媒体信息的提取,能够根据媒体动态显示标题等信息。

  5. 显示媒体时间进度

    在媒体控制栏中实现了媒体当前时间和总时间的显示。

  6. 实现了应用的真正全屏效果

    点击全屏按钮,应用能够真正全屏显示,而不只是将视频元素填满当前窗口。

  7. 播放音乐时,音乐信息能动态显示在磁贴上

遇到的问题

  • 问题:请求返回的XML存在中文乱码的问题

    解决方案:查阅相关资料后,将命名空间Windows.Web.Http更改为命名空间System.Net.Http,成功解决问题。

思考与总结

在本次实验中,我实现了UWP应用的媒体播放功能,能够播放本地的媒体资源。

在实验中,我学到了许多有趣而实用的知识,例如控制媒体播放,并且参考了一些成熟的媒体播放器的设计,对播放器进行了多重美化,很好地锻炼了UI设计的能力。经过这次实验,我的应用摆脱了简单的本地文本内容,进入了多媒体的世界,具有了更好的实用性和可扩展性。

GitHub

https://github.com/Xungerrrr/SYSU-UWP/tree/master/Media%20Player

参考资料

CATALOG
  1. 1. 实验步骤
  2. 2. 关键步骤截图
  3. 3. 亮点与改进
  4. 4. 遇到的问题
  5. 5. 思考与总结
  6. 6. GitHub
  7. 7. 参考资料