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

Question

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

仓库： https: //github.com/lhz516/react-h5-audio-player

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

function Audio() {

  const audiofunction = () => {

    document.getElementById('player').play();

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

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

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

以下内容来自文档

访问音频元素 您可以直接访问底层音频元素。首先，获取 ReactAudioPlayer 的引用：

this.player = createRef()

  < ReactAudioPlayer ref = { this.player } />

然后你可以像这样访问音频元素：

this.player.current.audio.current

Answer 1

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