如何在 React 功能組件中切換音頻

Question

單擊<img />時，我試圖播放/停止音頻。 每個<img />都與不同的音頻文件相關。 當用戶不停止時，音頻應該循環播放。 我不喜歡使用類組件，因為我可以使用鈎子。

我的實際代碼不會停止音頻； 不要循環它； 如果我單擊兩次，音頻就會重疊（同時發出兩個聲音）。

import myJSON from "./assets/myJSON.json";

export default function Card() {
 
    const handleClick = (argument) => {
        new Audio(argument.target.dataset.sound).play()
    }
    
    return (
        <>
            {myJSON.map((myObject, index) => {
                return (
                    <img
                        src={myObject.image}
                        alt={myObject.name}
                        key={index}
                        onClick={handleClick} 
                        data-sound={myObject.sound}
                    />
                );
            })}
        </>
    );
}

我可以隨意更改 json 或嘗試不同的方法。

Answer 1

我為你創建了一個代碼沙箱，你可以在這里訪問： https : //codesandbox.io/s/silly-hypatia-8fwun?file=/src/App.js

我已經創建了一個示例，說明我將如何處理這些問題：

請注意：數組的順序很重要，因為我將離開索引來決定播放哪些歌曲以及不播放哪些歌曲。 您不一定必須采用這種方法。 這只是一個快速而骯臟的解決方案。

import { useEffect, useState } from "react";

export default function App() {
  const [musicArray] = useState([
    "https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba-online-audio-converter.com_-1.wav",
    "https://www2.cs.uic.edu/~i101/SoundFiles/BabyElephantWalk60.wav"
  ]);
  const [data, setData] = useState([]);

  useEffect(() => {
    const musicData = musicArray.map((sound) => {
      return { audio: new Audio(sound), play: false };
    });

    setData(musicData);
  }, [musicArray]);

  const playSound = (index) => {
    setData((arr) =>
      arr.map((sound, i) => {
        if (i === index) {
          sound.audio.play();
          return { ...sound, play: true };
        }
        sound.audio.pause();
        return { ...sound, play: false };
      })
    );
  };

  useEffect(() => {
    console.log(data);
  }, [data]);

  const stopSound = (index) => {
    setData((arr) =>
      arr.map((sound, i) => {
        if (i === index) {
          sound.audio.pause();
          return { ...sound, play: false };
        }
        return { ...sound, play: false };
      })
    );
  };

  return (
    <div className="App">
      {data.map((sound, i) => {
        return (
          <>
            {sound.play ? (
              <button onClick={() => stopSound(i)}>pause</button>
            ) : (
              <button onClick={() => playSound(i)}>play</button>
            )}
          </>
        );
      })}

      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}