React Howlerで実装した音楽PlayerをBluetoothの外部デバイスから操作してみた

import React, { useState, useEffect } from "react";
import './App.css';
import ReactHowler from 'react-howler'

function App() {
  const [fileIdx, setFileIdx] = useState(0)
  const [playing, setPlaying] = useState(false)
  const [mp3files, setMp3Files] = useState([{program_name:'DUMMY',file_name:'DUMMY'}])

  useEffect(() => {
    (async() => {
      // ここでdataに実際のmp3の情報を取得する（実装は省略してます）
      setMp3Files(data)
    })()
  }, []);

  function onEnd() {
    setPlaying(false)
  }

  return (
    <div className="App">
      <header className="App-header">
        <div>No.{fileIdx+1}: {mp3files[fileIdx].program_name}</div>
      {mp3files[0].file_name !== "DUMMY" &&
        <button className="App-btn" onClick={() => setPlaying(!playing)}>
          {playing ? 'STOP' : 'PLAY'}
        </button>
      }
      <button className="App-btn" onClick={() => {
          setFileIdx(fileIdx + 1 < mp3files.length ? fileIdx + 1 : 0)
        }
      }>
        CHANGE MUSIC
      </button>
      {playing &&
        <ReactHowler
          src={`https://your-domain.com/${mp3files[fileIdx].file_name}`}
          playing={true}
          onEnd={onEnd}
          html5={true}
        />
      }
      </header>
    </div>
  );
}

export default App;

package com.example.mp3player

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import android.webkit.WebView
import android.webkit.WebViewClient
import android.webkit.WebChromeClient
import android.view.KeyEvent
import android.content.Intent
import android.support.v4.media.session.MediaSessionCompat

class MainActivity : AppCompatActivity() {

    private lateinit var myWebView: WebView
    private var mediaSession: MediaSessionCompat? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        myWebView = findViewById(R.id.webview)
        myWebView.webChromeClient = WebChromeClient()
        myWebView.settings.javaScriptEnabled = true
        myWebView.loadUrl("https://your-app.com/")

        // MediaSessionの設定
        mediaSession = MediaSessionCompat(this, "Tag").apply {
            setCallback(object : MediaSessionCompat.Callback() {
                override fun onMediaButtonEvent(mediaButtonIntent: Intent): Boolean {
                    val keyEvent = mediaButtonIntent.getParcelableExtra<KeyEvent>(Intent.EXTRA_KEY_EVENT)
                    if (keyEvent?.action == KeyEvent.ACTION_UP && keyEvent?.keyCode in arrayOf(KeyEvent.KEYCODE_MEDIA_PLAY, KeyEvent.KEYCODE_MEDIA_PAUSE)) {
                        myWebView.evaluateJavascript("document.getElementsByTagName('button')[0].click();", null)
                        return true
                    }
                    if (keyEvent?.action == KeyEvent.ACTION_UP && keyEvent?.keyCode == KeyEvent.KEYCODE_MEDIA_NEXT) {
                        myWebView.evaluateJavascript("document.getElementsByTagName('button')[1].click();", null)
                        return true
                    }
                    return super.onMediaButtonEvent(mediaButtonIntent)
                }
            })
            isActive = true
        }
    }

    override fun onDestroy() {
        super.onDestroy()
        mediaSession?.run {
            isActive = false
            release()
        }
    }
}