HTML5 下一个和上一个音频使用来自 Chrome 的通知

Question

我正在研究音乐播放器。我成功地能够从 url 播放音频并收到播放音乐的通知。

我可以使用 play/pause 按钮来 play/pause 音乐（它自动工作），但我不知道如何实现下一个和上一个按钮。我正在使用最新版本的 Chrome (84.0.4147.89)。

[编辑 1]

最小可重现代码：

<html>
      <head>
        <title>Xt3m1xMus1c</title>
      </head>
      <body>
        <audio id="song" src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" autoplay></audio>
      </body>
      <script>
          function nextSong() {
             // Need to call this function when I press the next button on the notification
             document.getElementById("song").setAttribute('src', "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3");
          }
      </script>
</html>

Answer 1

可以使用 Media Session API 控制这些按钮。要实现上一个和下一个按钮，您需要设置相应的操作处理程序。

navigator.mediaSession.setActionHandler(
    'nexttrack',
    () => { /* Your code to play the next track. */ }
);
navigator.mediaSession.setActionHandler(
    'previoustrack',
    () => { /* Your code to play the previous track. */ }
);

但我认为图片中显示的按钮是 'seekbackward' 和 'seekforward' 按钮。

HTML5 下一个和上一个音频使用来自 Chrome 的通知

HTML5 Next and Previous Audio using nofitication from Chrome

html

google-chrome

html5-audio