IT之家學院: 利用Win10通知巧妙實現UWP桌麵歌詞

Windows 10創意者更新（Creators Update）已經發布了幾個月。我們應該還記得，微軟在這個版本中新增了在通知中添加進度條的功能，並首先在應用商店用上了這個功能。不過，你有沒有想過，這個通知可以做一些別的東西呢？下麵，我來介紹一下，如何以Creator的身份，做出一個Creative的桌麵歌詞。

成果示例

我已經做了一個很簡單的實現桌麵歌詞的應用。如果你看不懂代碼，你可以選擇直接安裝這個應用，算是捧個場。應用下載地址：請點此鏈接。

在電腦上的安裝方法：

1.打開旁加載。

3.全部解壓，然後找到ps1文件，右鍵單擊，然後選擇“使用PowerShell運行”。

4.遇到的提示一律允許。

效果圖：

通知的效果

整個屏幕的效果

利弊分析

可以看到，這個桌麵歌詞占了屏幕右下角挺大的一塊（尤其是Win10秋季創意者更新）。你可以作適當的調整，例如去掉進度條和按鈕（按鈕不在本文介紹的範圍內），僅保留歌詞，這樣占用的空間會少一點。另外，此通知需要常駐在屏幕上，為了實現這個效果，在手機上會導致屏幕的其它部分無法操作（必須劃掉通知，但這樣桌麵歌詞就失去意義），因此，本教程僅適用於PC和除了手機以外的其它可能適合的設備。

第一步：啟動播放器

MediaPlayer player = new MediaPlayer;

player.AutoPlay = true;

StorageFile file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///SampleSong.mp3"));

player.Source = MediaSource.CreateFromStorageFile(file);

以上的代碼表示新建一個播放器，為它設置一個文件資源，然後讓它自動播放。

第二步：掛載事件

播放器大約每0.25秒就會觸發一次PositionChanged事件，頻率還是挺高的。我們可以利用這個事件來顯示進度、時間和歌詞。

player.PlaybackSession.PositionChanged += PlaybackSession_PositionChanged;

第三步：發送通知

在Visual Studio中，點擊工具>NuGet包管理器>程序包管理器控製台。等待“PM>”字符出現，然後輸入

Install-Package Microsoft.Toolkit.Uwp.Notifications

按回車鍵並等待完成。

然後，可以使用如下代碼發送通知：

第一屏：此屏代碼實現的效果有：

1.設置標題為“Scarborough Fair”

2.添加了進度條，並且綁定了四個字符串（BindableString）

3.設置了Scenario，使其常駐在屏幕上

4.設置了靜音

第二屏：此屏代碼實現的效果有：

1.給之前綁定的四個字符串指定值

2.給這個通知指定唯一的Tag

3.設置SequenceNumber為0，使係統知道這個數據是及時的

4.發送通知

第四步：處理事件

還記得嗎？我們剛剛掛載了PositionChanged事件，現在該是處理它的時候了。

圖中的“Sample”表示Tag。

這裏的progressValue用於顯示進度條，是從0到1的數字（轉為字符串），我通過Milliseconds進行計算，因為我想要它盡量精確。

progressStatus顯示當前播放的時間，其中sec是比較容易忽略的。當秒數小於10的時候，十位數是0，不能省略，否則會顯示“1:2”而不是“1:02”。

我們可以發現這裏並沒有設置progressValueString，因為我們已經在第三步設置它為總時間4:13，而這個總時間是不會改變的，所以在這裏我們無需設置它。

最後是最難的progressTitle。這裏你需要解析lrc或者其它歌詞格式，需要由你自己來完成。不過，如果你還沒有會解析歌詞，而又想提前體驗一下效果，我提供臨時的解決方案，以後你再慢慢學習解析歌詞。

源代碼下載：

考慮到水印可能遮擋代碼以及第四步的臨時解決方案的代碼過長，本文提供源代碼下載。

以上的代碼請點此鏈接下載

選擇“MusicSampleforITHome.zip”即可。

下一步做什麼？

下一步當然是把上麵的代碼化用了，因為你可以發現所有的播放源、歌曲名等等已經在代碼裏麵寫死了。你需要做的就是將其靈活地運用在你需要它的位置。祝你成功！