实验步骤
- 在Visual Studio中新建Media Player项目,创建Player页面;
- 在Player页面中使用Grid布局页面,第一行放置MediaPlayerElement以及包含歌曲标题和封面的StrollViewer等元素,第二行放置自行设计的媒体控制栏,其中包含媒体进度条、开始暂停按钮、停止按钮、选取文件按钮、全屏按钮等元素。
- 在cs文件中,使用MediaPlayer和MediaTimelineController控制媒体播放,并在相关函数中实现读取文件、提取媒体信息、绑定媒体位置与进度条位置、控制封面旋转动画等功能。
关键步骤截图
图1. 音乐播放器启动界面:
图2. 音乐播放示例:
图3. 视频播放示例:
亮点与改进
选择本地媒体的功能
媒体播放器实现了选择本地媒体的功能,能够打开本地的音乐和视频进行播放。
美化界面
设计上,加入了很有质感的Acrylic材质,使应用透明化。在媒体播放器中播放音乐时,专辑封面会做毛玻璃模糊处理,使应用背景能够根据专辑封面动态改变。另外,用Acrylic材质实现了媒体控制栏颜色自动跟随系统主题颜色。
注:要实现此效果,必须使用最新版Windows 10 SDK(版本16299)生成解决方案,否则会提示找不到相关资源,无法运行。
实现封面旋转
在播放音乐时,封面旋转;播放结束时,封面复位;暂停时,封面的旋转动作暂停;在播放视频时,封面隐藏。
显示媒体的缩略图、标题、艺术家、专辑等信息
实现了媒体信息的提取,能够根据媒体动态显示标题等信息。
显示媒体时间进度
在媒体控制栏中实现了媒体当前时间和总时间的显示。
实现了应用的真正全屏效果
点击全屏按钮,应用能够真正全屏显示,而不只是将视频元素填满当前窗口。
播放音乐时,音乐信息能动态显示在磁贴上
遇到的问题
问题:请求返回的XML存在中文乱码的问题
解决方案:查阅相关资料后,将命名空间Windows.Web.Http更改为命名空间System.Net.Http,成功解决问题。
思考与总结
在本次实验中,我实现了UWP应用的媒体播放功能,能够播放本地的媒体资源。
在实验中,我学到了许多有趣而实用的知识,例如控制媒体播放,并且参考了一些成熟的媒体播放器的设计,对播放器进行了多重美化,很好地锻炼了UI设计的能力。经过这次实验,我的应用摆脱了简单的本地文本内容,进入了多媒体的世界,具有了更好的实用性和可扩展性。
GitHub
https://github.com/Xungerrrr/SYSU-UWP/tree/master/Media%20Player