반응형
아래 코드는 클릭한 오디오만 재생되고, 다른 오디오는 정지됩니다.
또한 오디오가 끝나면 다음 오디오로 자동으로 넘어갑니다.
<!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>
반응형
'SMART GPT' 카테고리의 다른 글
| JavaScript escape()와 unescape() (0) | 2023.09.28 |
|---|---|
| 자바스크립트 const 과 var 차이 (0) | 2023.09.28 |
| JavaScript에서 URL을 암호화하고 복호화하는 방법 (0) | 2023.09.28 |
| 스크립트 변수에 문자열 포함 확인 (0) | 2023.09.28 |
| CSS -webkit-min-device-pixel-ratio 속성 (0) | 2023.09.27 |
| 자동으로 페이드 아웃 및 페이드 인 효과를 주면서 배경색을 랜덤하게 변경 (0) | 2023.09.27 |
| 제이쿼리 랜덤으로 배경색 변경 (0) | 2023.09.27 |
| 웹 페이지에서 JavaScript 와 PHP를 사용하여 모바일 디바이스와 데스크톱 컴퓨터를 구분하는 방법 (0) | 2023.09.26 |
댓글