Naive Media Player（二）

最新推荐文章于 2024-08-08 07:48:01 发布

Troublor

最新推荐文章于 2024-08-08 07:48:01 发布

阅读量269

点赞数

CC 4.0 BY-SA版权

分类专栏： UWP 文章标签： UWP C#

本文链接：https://blog.youkuaiyun.com/troublor/article/details/79935944

UWP 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了使用简单URI实现远程音频文件的播放方法，并探讨了文件下载与播放历史记录的处理方式。此外，还讨论了如何通过UserControl展示远程资源列表，并实现了下载进度的实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学聪明了：先贴GitHub地址

这是上一篇的地址：Naive Media Player（一）

任务

加入远端音频文件播放和缓存的。

功能及实现

播放远端音频

这个事情说容易也容易，说难也挺麻烦。简单想想这和播放本地音频文件没什么不同，只是文件我网络上。但是本地文件播放是要用流Stream的。

原本播放本地文件的代码为：

var picker = new Windows.Storage.Pickers.FileOpenPicker();
picker.ViewMode = Windows.Storage.Pickers.PickerViewMode.Thumbnail;
picker.SuggestedStartLocation =Windows.Storage.Pickers.PickerLocationId.VideosLibrary;
picker.FileTypeFilter.Add(".mp3");
picker.FileTypeFilter.Add(".mp4");
Windows.Storage.StorageFile file = await picker.PickSingleFileAsync();
if (file != null)
{
    MediaManager.Instance.PlayHistories.Add(new PlayHistory(file.Name, file.Path));
                // Application now has read/write access to the picked file
    var stream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read);
    MediaElement.SetSource(stream, file.ContentType);
    MediaElement.Play();
}

想着原理都差不多，于是就想将远端的文件也用stream流打开，然后传给MediaElement的SetSource方法。但是，查了很久，根本就没有哪里说可以用http打开一个文件流。这下很尴尬，本来以为很简单的一件事情其实并没有那么简单。

然而事实比我想的还要简单。。。

找到了官方文档：里面有一段是这样的

private void LoadMediaFromString(string path)
{
    try
    {
        Uri pathUri = new Uri(path);
        mediaPlayer.Source = pathUri;
    }
    catch (Exception ex)
    {
        if (ex is FormatException)
        {
            // handle exception. 
            // For example: Log error or notify user problem with file
        }
    }
}

这么简单。。。流什么的都是不存在的。。。
只是一个Uri赋值给了Source属性就结束了。。。
然后我又想，说不定本地文件也可以呢。
然而，悲剧了。想多了。。。

下载

文件下载，没有什么想法，直接去查文档。看这里

try
{
    Uri source = new Uri(serverAddressField.Text.Trim());
    string destination = fileNameField.Text.Trim();

    StorageFile destinationFile = await KnownFolders.PicturesLibrary.CreateFileAsync(
                    destination, CreationCollisionOption.GenerateUniqueName);

    BackgroundDownloader downloader = new BackgroundDownloader();
    DownloadOperation download = downloader.CreateDownload(source, destinationFile);

                // Attach progress and completion handlers.
    HandleDownloadAsync(download, true);
}
catch (Exception ex)
{
    LogException("Download Error", ex);
}

复制 - 粘贴。
不好用。巨坑的微软文档。
仔细看了看发现是要把HandleDownloadAsync(download, true); 换成await download.StartAsync();这样就好了

播放

播放这个就比较容易了，值得注意的是如何获取Music库的路径，毕竟不能粗暴得写Hard Code嘛，关于库的操作微软在文档里说的很清楚了，虽然乱七八糟的。看这里
获取音乐库基本上就是下面这几句，举一反三把。

var myMusic = await Windows.Storage.StorageLibrary.GetLibraryAsync
        (Windows.Storage.KnownLibraryId.Music);

User Control

这里就是自己作死了，想得天花乱坠的。
想做成左侧有三个页面，分别是远端文件列表，播放历史，以及缓存列表
这里写图片描述

缓存和历史记录那边还好，利用DataTemplate + ListView就解决了
但是远端资源这一页，功能比较多，要点击播放，还有点击缓存，缓存的时候还想要显示下载进度条，这仅仅用DataTemplate + ListView就满足不了了

经过老师指点，尝试用了一下UserControl

单独做出来这样的一个控件
这里写图片描述

然后每一个远端资源都生成一个这样的控件就可以了，他自己也可以有自己的逻辑，很方便。

其实一开始是想把这个UserControl放在ListView里作为模板的，但是一直放不进去，放在ListView里面也不对是放在ListView.ItemTemplate里面也不对，许久，在google（Google大法好）上找到了一个老外的博客，里面讲他工作中一次自定义ListView的经历（和老外一起吐槽不懂技术的设计人员一分钟 no offence），看着看着突然发现我脑残了，为什么一定要数据绑定，为什么一定要用Template，在没有标签化设计的时候，用传统代码不是也可以实现类似模板的功能吗。。。

茅塞顿开

于是出手成章：

foreach (CloudResource cloudResource in MediaManager.Instance.CloudResources)
{
    CloudResourcesStackPanel.Children.Add(new CloudItemViewer(cloudResource));
}

这里的CloudResource是远端文件信息存储的类，CloudResourcesStackPanel就是放模板的容器。简洁，优雅，完美 :P

下载进度

想起了应用商店的下载界面，也想在缓存的时候做一个进度条，于是去官方文档找下载进度这方面的，没找着，倒是在后台任务那边找到了进度这个东西（看这里），然而实际上并没有什么用，这里用的都是IBackgroundTaskRegistration的对象然而下载的时候虽然用到了BackgroundDownloader这个类，也有background这个词，但是，这还是不一样啊。

是时候发挥真正的想象力了

经过一番尝试，果然发现DownloadOperation有Progress这个属性，大喜

于是要用上虽然很笨但是挺有效的方法了。用Timer循环去Progress里找的BytesReceived属性和TotalBytesToReceive属性，这两个一除不就是进度嘛

Timer timer = new System.Timers.Timer(50);
//             Hook up the Elapsed event for the timer. 
timer.Elapsed += ShowCacheProgress;
timer.AutoReset = true;
timer.Enabled = true;
await _downloadOperation.StartAsync();
timer.Stop();
timer.Dispose();

private void ShowCacheProgress(Object source, ElapsedEventArgs e)
{
    var a = _downloadOperation.Progress;
    if (a.TotalBytesToReceive != 0)
    {
        Double percentage = _downloadOperation.Progress.BytesReceived /
                                                _downloadOperation.Progress.TotalBytesToReceive;
        CacheProgressBar.Value = CacheProgressBar.Width * percentage;
    }
}

迫不及待地试了试。。。

结果，杯具了。
这里写图片描述

调用了另一个线程的接口！？

行吧。。。

想想也确实是的。说的没错。

唉，结果最后做了一个ProgressRing来凑数
这里写图片描述

忧伤.gif

单件模式

还有一个小的地方，这个UserControl和主页面需要共享MediaElement播放器，于是就用了一个单件模式：

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.Storage;
using Windows.UI.Xaml.Controls;

namespace NaiveMediaPlayer.Models
{
    class MediaManager
    {
        public static MediaManager Instance = new MediaManager();

        private MediaManager()
        {

        }

        public MediaElement MediaElement { get; set; }

        public ObservableCollection<PlayHistory> PlayHistories { get; set; }

        public ObservableCollection<CachedItem> CachedItems { get; set; }

        public ObservableCollection<CloudResource> CloudResources { get; set; }

        public StorageFolder SaveFolder { get; set; }

        public async void LoadCachedItems()
        {
            var fileList = await SaveFolder.GetFilesAsync();
            CachedItems.Clear();
            foreach (var file in fileList)
            {
                if (file.FileType == ".mp3" || file.FileType == ".mp4")
                {
                    CachedItems.Add(new CachedItem(file.Name, file.Path));
                }
            }
        }
    }
}