📖
클릭한 오디오만 재생되고 현재 재생 중인 오디오를 정지시키는 기능
페이지 정보
본문
아래 코드는 클릭한 오디오만 재생되고, 다른 오디오는 정지됩니다.
또한 오디오가 끝나면 다음 오디오로 자동으로 넘어갑니다.[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Audio</title>
</head>
<body>
<audio class="Audio" controls>
<source src="음악주소1" type="audio/mpeg">
</audio>
<audio class="Audio" controls>
<source src="음악주소2" type="audio/mpeg">
</audio>
<audio class="Audio" controls>
<source src="음악주소3" type="audio/mpeg">
</audio>
<script>
const audioElements = document.querySelectorAll('.Audio');
let currentAudio = null;
function playAudio(index) {
if (currentAudio !== null) {
currentAudio.pause(); // 현재 재생 중인 오디오를 정지
}
currentAudio = audioElements[index]; // 현재 재생 중인 오디오 변경
currentAudio.play(); // 새로운 오디오 재생
}
audioElements.forEach(function(audioElement, index) {
audioElement.addEventListener('play', function() {
audioElements.forEach(function(element) {
if (element !== audioElement) {
element.pause(); // 다른 오디오를 일시 정지
}
});
});
audioElement.addEventListener('ended', function() {
if (index < audioElements.length - 1) {
playAudio(index + 1); // 다음 오디오 재생
}
});
audioElement.addEventListener('click', function() {
playAudio(index); // 클릭한 오디오 재생
});
});
// 초기에 첫 번째 오디오 재생
playAudio(0);
</script>
</body>
</html>[/code]
또한 오디오가 끝나면 다음 오디오로 자동으로 넘어갑니다.[code]<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML5 Audio</title>
</head>
<body>
<audio class="Audio" controls>
<source src="음악주소1" type="audio/mpeg">
</audio>
<audio class="Audio" controls>
<source src="음악주소2" type="audio/mpeg">
</audio>
<audio class="Audio" controls>
<source src="음악주소3" type="audio/mpeg">
</audio>
<script>
const audioElements = document.querySelectorAll('.Audio');
let currentAudio = null;
function playAudio(index) {
if (currentAudio !== null) {
currentAudio.pause(); // 현재 재생 중인 오디오를 정지
}
currentAudio = audioElements[index]; // 현재 재생 중인 오디오 변경
currentAudio.play(); // 새로운 오디오 재생
}
audioElements.forEach(function(audioElement, index) {
audioElement.addEventListener('play', function() {
audioElements.forEach(function(element) {
if (element !== audioElement) {
element.pause(); // 다른 오디오를 일시 정지
}
});
});
audioElement.addEventListener('ended', function() {
if (index < audioElements.length - 1) {
playAudio(index + 1); // 다음 오디오 재생
}
});
audioElement.addEventListener('click', function() {
playAudio(index); // 클릭한 오디오 재생
});
});
// 초기에 첫 번째 오디오 재생
playAudio(0);
</script>
</body>
</html>[/code]
댓글목록
등록된 댓글이 없습니다.
  |