如何在Electron音乐网站包装应用中启用SystemMediaTransportControls?
解决SystemMediaTransportControls不显示的问题
嘿,我来帮你捋捋为啥SystemMediaTransportControls没显示出来——你现在的代码只引入了必要的枚举类,但还差几个关键步骤没做,我给你拆解一下:
必须获取并启用控件实例
你得先拿到SystemMediaTransportControls的实例,并且把它启用,这是控件显示的基础。补充这段代码:const { SystemMediaTransportControls, SystemMediaTransportControlsButton } = require('@nodert-win10/windows.media'); const { BackgroundMediaPlayer } = require('@nodert-win10/windows.media.playback'); // 从后台播放器获取控件实例 const smtc = BackgroundMediaPlayer.current.systemMediaTransportControls; // 启用控件,这一步绝对不能少! smtc.isEnabled = true;设置播放状态与媒体类型
系统需要知道当前媒体的类型和播放状态,才会正确渲染控件。把你引入的枚举用起来:smtc.playbackType = MediaPlaybackType.music; // 明确是音乐类型,控件会显示对应图标 smtc.playbackStatus = MediaPlaybackStatus.playing; // 根据实际状态设置,比如paused/stopped可选但建议:绑定媒体元数据
如果想让控件显示歌曲名、艺术家这类信息,补充元数据设置会让控件更完整,也能提升用户体验:const { MediaItemDisplayProperties } = require('@nodert-win10/windows.media.playback'); const displayProps = new MediaItemDisplayProperties(); displayProps.type = MediaPlaybackType.music; displayProps.musicProperties.title = "你的歌曲名称"; displayProps.musicProperties.artist = "歌手名字"; // 关联到当前媒体项并更新控件 BackgroundMediaPlayer.current.currentMediaItem.displayProperties = displayProps; smtc.updateDisplayProperties(displayProps);可选但必要:处理控件交互事件
要是想让控件的播放/暂停按钮真的生效,得监听按钮点击事件,同步你的播放逻辑:smtc.addEventListener('buttonpressed', (eventArgs) => { switch (eventArgs.button) { case SystemMediaTransportControlsButton.play: BackgroundMediaPlayer.current.play(); smtc.playbackStatus = MediaPlaybackStatus.playing; break; case SystemMediaTransportControlsButton.pause: BackgroundMediaPlayer.current.pause(); smtc.playbackStatus = MediaPlaybackStatus.paused; break; // 还可以处理上一曲、下一曲等按钮事件 } });
简单来说,你之前的代码只做了“引入依赖”这一步,没真正实例化、启用控件,也没告诉系统当前的媒体状态——补上这些步骤,控件应该就能正常显示啦!
内容的提问来源于stack exchange,提问作者user2452483




