开发媒体播放器时如何添加类似VLC的任务栏媒体按钮

你要实现的VLC式任务栏悬浮控制效果如下图所示：

这个功能不是第三方扩展实现的，是Windows 7及以上版本系统原生提供的任务栏缩略图工具栏能力，所有主流桌面播放器用的都是这套公开API，根据你用的开发技术栈选对应实现即可：

原生Win32/C++ 实现 #

核心调用系统提供的ITaskbarList3COM接口完成按钮绑定，步骤如下：

• 先初始化COM环境，创建ITaskbarList3实例后调用HrInit()方法完成初始化
• 定义需要展示的控制按钮（单个窗口最多支持添加7个按钮，添加后无法增删，只能更新状态），每个按钮对应一个THUMBBUTTON结构体，配置好图标、提示文案、自定义按钮ID
• 等主窗口加载完成、任务栏生成对应图标后，调用ThumbBarAddButtons()方法把按钮数组绑定到当前窗口句柄
• 监听窗口的WM_COMMAND消息，根据返回的按钮ID触发对应的播放、暂停、切歌逻辑；播放状态变化时调用ThumbBarUpdateButtons()更新按钮图标和状态即可

最简代码示例：

// 初始化任务栏接口实例
ITaskbarList3* pTaskbarList = nullptr;
CoCreateInstance(CLSID_TaskbarList, nullptr, CLSCTX_INPROC_SERVER, IID_PPV_ARGS(&pTaskbarList));
pTaskbarList->HrInit();

// 配置播放/暂停按钮
THUMBBUTTON tbButtons[1] = {};
tbButtons[0].dwMask = THB_ICON | THB_TOOLTIP | THB_FLAGS;
tbButtons[0].iId = 1001; // 自定义按钮ID，消息回调时用来识别按钮
tbButtons[0].hIcon = LoadIcon(hInstance, MAKEINTRESOURCE(IDI_PLAY));
wcscpy_s(tbButtons[0].szTip, L"播放/暂停");
tbButtons[0].dwFlags = THBF_ENABLED;

// 给主窗口绑定按钮
pTaskbarList->ThumbBarAddButtons(hMainWnd, ARRAYSIZE(tbButtons), tbButtons);

WPF/.NET 实现 #

不需要手写COM调用，框架已经做了封装：

• .NET Framework 4.0+ 可以安装WindowsAPICodePack-Shell包，通过TaskbarManager类的缩略图工具栏接口添加按钮
• .NET 5+ 可以直接用System.Windows.Shell命名空间下自带的TaskbarItemInfo和ThumbButtonInfo，支持XAML直接声明配置：

<Window.TaskbarItemInfo>
    <TaskbarItemInfo>
        <TaskbarItemInfo.ThumbButtonInfos>
            <ThumbButtonInfo ImageSource="/Assets/prev.png" Description="上一曲" Click="PrevTrack_Click"/>
            <ThumbButtonInfo x:Name="PlayBtn" ImageSource="/Assets/play.png" Description="播放/暂停" Click="TogglePlay_Click"/>
            <ThumbButtonInfo ImageSource="/Assets/next.png" Description="下一曲" Click="NextTrack_Click"/>
        </TaskbarItemInfo.ThumbButtonInfos>
    </TaskbarItemInfo>
</Window.TaskbarItemInfo>

播放状态变化时直接更新PlayBtn的ImageSource属性就能自动同步任务栏按钮图标。

Electron 实现 #

Electron原生内置了缩略图工具栏配置API，不需要第三方插件，直接调用BrowserWindow.setThumbarButtons即可：

const mainWindow = new BrowserWindow({
  width: 1200,
  height: 800,
  // 其他窗口配置
})

// 初始化任务栏按钮
function updateThumbarButtons(isPlaying) {
  mainWindow.setThumbarButtons([
    {
      tooltip: '上一曲',
      icon: path.join(__dirname, 'assets/prev.png'),
      click: () => player.prevTrack()
    },
    {
      tooltip: isPlaying ? '暂停' : '播放',
      icon: path.join(__dirname, isPlaying ? 'assets/pause.png' : 'assets/play.png'),
      click: () => player.togglePlay()
    },
    {
      tooltip: '下一曲',
      icon: path.join(__dirname, 'assets/next.png'),
      click: () => player.nextTrack()
    }
  ])
}

// 播放状态变化时重新调用方法更新按钮即可
player.on('playStateChange', (isPlaying) => updateThumbarButtons(isPlaying))

Qt 跨平台实现 #

Qt 5.2及以上版本提供了Windows任务栏相关的封装类QWinTaskbarButton，直接调用即可，不需要操作原生COM接口：

// 给主窗口绑定任务栏按钮
QWinTaskbarButton *taskbarBtn = new QWinTaskbarButton(this);
taskbarBtn->setWindow(this->windowHandle());
QWinThumbnailToolBar *thumbBar = taskbarBtn->thumbnailToolBar();

// 添加播放暂停按钮
QWinThumbnailToolButton *playBtn = new QWinThumbnailToolButton(thumbBar);
playBtn->setIcon(QIcon(":/icons/play.png"));
playBtn->setToolTip("播放/暂停");
connect(playBtn, &QWinThumbnailToolButton::clicked, this, &PlayerWidget::togglePlay);
thumbBar->addButton(playBtn);

补充说明：如果需要让Win10/11系统音量弹窗、锁屏界面、全局媒体快捷键也能识别控制你的播放器，还需要额外对接系统SMTC（System Media Transport Controls）接口，上述技术栈目前都有对应的成熟封装，和缩略图工具栏配合即可达到和VLC、Spotify等主流播放器一致的体验。

内容的提问来源于stack exchange，提问作者c͓̽o͓̽d͓̽e͓̽x͓̽