Search code examples
htmlgoogle-chromehtml5-audio

HTML5 Next and Previous Audio using nofitication from Chrome

I am working on a music player. I am successfully able to play audio from urls and getting notification of the playing music.

enter image description here

I can use the play/pause button to play/pause the music ( it worked automatically), but I don't know how to implement the next and previous buttons. I am using latest version of Chrome (84.0.4147.89).

[Edit 1]

Minimum Reproducible Code:

<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>
Solution

  • These buttons can be controlled with the Media Session API. To implement the previous and next buttons you need to set the corresponding action handlers.

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

    But I think the buttons shown in the picture are the 'seekbackward' and 'seekforward' buttons.