File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import React, { useRef, useState } from "react";
import "./SongCountryBasicLearning.css";
const SongCountryDeepLearning2 = ({ contents }) => {
const [currentAudio, setCurrentAudio] = useState("");
const audioRef = useRef(null);
const toggleAudio = (audioSource) => {
if (currentAudio === audioSource && audioRef.current) {
if (!audioRef.current.paused) {
audioRef.current.pause();
} else {
audioRef.current.play();
}
} else {
setCurrentAudio(audioSource);
// 오디오 소스 변경 후 재생
if (audioRef.current) {
audioRef.current.pause();
audioRef.current.load(); // 새 소스로 오디오를 다시 로드
audioRef.current.play();
}
}
};
return (
<>
{contents && (
<>
<div
className="basic-learning-songcountry-img-container"
onClick={() =>
toggleAudio(contents.deep.countryTwoFiles[1].element)
}
>
<div className="basic-learning-songcountry-img2">
<img src="images/good4.png" alt="" />
</div>
<div className="basic-learning-songcountry-sentence">
<h2>{contents.deep.countryTwoFiles[1].sentence}</h2>
<h3>{contents.deep.countryTwoFiles[1].sentenceMeaning}</h3>
</div>
</div>
<audio ref={audioRef} controls style={{ display: "none" }}>
<source src={currentAudio} type="audio/mpeg" />
</audio>
</>
)}
</>
);
};
export default SongCountryDeepLearning2;