How to integrate media session api with React?

Question

I have a simple react audio player and I want to integrate Chrome's media session api so that the player can be controlled through the browser. How would I go about this?

App.js

import React from "react";
import AudioPlayer from "./AudioPlayer";

function App() {
  return (
    <div className="App">
      <AudioPlayer />
    </div>
  );
}

export default App;

AudioPlayer.js

import React, { Component } from "react";

class AudioPlayer extends Component {
  playTrack() {
    const track = document.getElementsByClassName("track")[0];
    track.play();
  }

  pauseTrack() {
    const track = document.getElementsByClassName("track")[0];
    track.pause();
  }

  render() {
    return (
      <div>
        <button onClick={this.playTrack}>Play</button>
        <button onClick={this.pauseTrack}>Pause</button>
        <audio className="track">
          <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" />
        </audio>
      </div>
    );
  }
}

export default AudioPlayer;

Answer 1

Use the mebtte/react-media-session