Javascript 如何使用状态/外部按钮播放/暂停音频播放器

我在react项目中有一个音频播放器。如何使用外部按钮开始播放播放器

回购：

我可能需要使用useRef或其他东西来引用播放器

函数音频（）{
常量audiofunction=（）=>{
document.getElementById（'player'）.play（）；
};
返回(
console.log（“onPlay”）}
id='player'
/>
玩
);
}

下面是文档中的内容

访问音频元素 您可以直接访问底层音频元素。首先，获得对音频播放器的参考：

this.player=createRef（）

然后您可以访问音频元素，如下所示：

this.player.current.audio.current

从“React”导入React，{useffect，useState，useRef}；
从“axios”导入axios；
从“react-h5-audio-player”导入AudioPlayer；
导入'react-h5-audio-player/lib/styles.css'；
函数音频（）{
const[song，setSong]=使用状态（“”）；
const player=useRef（）；
useffect（（）=>{
axios.get（）http://localhost:8000/songs/，然后（res=>setSong（res.data[0].track））
},[]);
常量audiofunction=（）=>{
player.current.audio.current.play（）；
};
返回(
console.log（“onPlay”）}
ref={player}
/>
玩
);
}
导出默认音频

import React,{useEffect,useState,useRef} from 'react';

import axios from 'axios';
import AudioPlayer from 'react-h5-audio-player';
import 'react-h5-audio-player/lib/styles.css';


function Audio() {
  const [song,setSong] = useState('');
  const player = useRef();
  useEffect(()=>{
    axios.get('http://localhost:8000/songs/').then(res=>setSong(res.data[0].track))
  },[]);
  const audiofunction = () => {


    player.current.audio.current.play();

  };
  return (
    <div className="App">


      <AudioPlayer 
   preload='metadata'
    src={song}
    onPlay={e => console.log("onPlay")}
    ref={player}
  />

   <button onClick={audiofunction}>play</button>
    </div>
  );
}

export default Audio