Question

我正在使用React.js，并且我有一个返回音频的API：

{
   audios: [
      "https://thisisanaudiolink",
      "https://thisisanaudiolink",
      "https://thisisanaudiolink"
   ]
}

我不想使用HTML的音频标签来播放，而是我的自定义按钮。我该怎么办？

到目前为止，我已经尝试过：

我尝试了这种循环，但是所有按钮仅播放最后一个音频：

import React, { useState, useRef } from "react";

const Flashcards = () => {

const [audios, setAudios] = useState([
    "https://s3-sa-east-1.amazonaws.com/carneiro/public/card_audios/d7f2a0-5c89ef/4.wav",
    "https://s3-sa-east-1.amazonaws.com/carneiro/public/card_audios/d7f2a0-5c89ef/12.wav",
    "https://s3-sa-east-1.amazonaws.com/carneiro/public/card_audios/d7f2a0-5c89ef/1.wav"
]);

const audioRef = useRef();

return (
    <div>
         {
             audios.map(audio => (
                <div key = {audio}>
                    <audio
                        controls = "controls"
                        preload = "auto"
                        autobuffer = "true"
                        style = {{display: "none"}}
                        ref = {audioRef}
                    >
                        <source src = {audio} />
                    </audio>


                    <button onClick = {() => audioRef.current.play()}>Play</button>
                </div>                  
             ))
         }
    </div>
   )
}
export default Flashcards;

Answer 1

“全部”按钮将播放最后一个音频的原因，因为您尝试将所有音频与一个参考绑定，每个音频参考会相互覆盖直到最后一个音频。有几种方法可以实现您想要的。最简单的方法是创建单独的组件来处理您的音频播放按钮。例如：

function AudioPlayer({ src }) {
  const audioRef = useRef();

  return (
    <div>
      <audio
        controls = "controls"
        preload = "auto"
        autobuffer = "true"
        style = {{display: "none"}}
        ref = {audioRef}
      >
       <source src={src} />
      </audio>

      <button onClick = {() => audioRef.current.play()}>Play</button>
    </div>
  );
}

然后，您可以在audio.map

中使用AudioPlayer

audios.map(audio => <AudioPlayer src={audio} />);

用React循环播放音频

1 个答案: