You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在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

火山引擎 最新活动