使用 React 循环播放音频

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

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