Воспроизведение звука на al oop с помощью React - PullRequest
Новая
       44

Воспроизведение звука на al oop с помощью React

0 голосов
/ 06 августа 2020

Я использую React. js и у меня есть API, который возвращает aud ios: 

{
   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;

1 Ответ

1 голос
/ 06 августа 2020

Причина, по которой кнопка all будет воспроизводить последний звук, потому что вы пытаетесь связать весь звук с одной ссылкой, каждая звуковая ссылка перекрывает друг друга до последнего звука. Есть несколько способов добиться желаемого. Самый простой способ - создать отдельный компонент для обработки кнопки воспроизведения звука. Например: 

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>
  );
}

Затем вы можете использовать AudioPlayer в своем audio.map

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