[HTML]오디오 재생 시 재생 중인 다른 오디오 정지 (HTML Audio DOM)

 

🔊  오디오 재생

let track = new Audio();
let flag = 0; // flag를 사용하여 재생 중인 오디오 있으면 정지

const playVoice = (audioSrc) =>{
	track.src = audioSrc;
	console.log(track.paused)

	if(flag === 0){
		flag = 1;
		playAudio();
	}else{
		flag = 0;
		stopAudio()
	}	
}

const playAudio = () => {
	track.play();
	track.paused = false
	iconAnimation("play");
}

const stopAudio = () => {
	track.pause();
	track.currentTime = 0;
	iconAnimation("stop");
}

track.addEventListener('ended', function() {
  	iconAnimation();
});

const iconVoice = document.querySelectorAll('.icon_voice');

const iconAnimation = (status) =>{
	iconVoice.forEach(function(icon){
		if(status === "play"){
			icon.classList.add('play');
		}else{
			icon.classList.remove('play');	  
		}
	})
}

 

 

 

new Audio(filePath) : 오디오 생성자

 new Audio(url)

 

HTMLAudioElement: Audio() constructor - Web APIs | MDN

 

audioObject.play()  : 오디오 재생 메서드

audioObject.pause()  : 오디오 정지 메서드

const playAudio = () => {
	track.play(); // 오디오 플레이
	track.paused = false; // "정지"속성 값 false
	iconAnimation("play"); // 플레이 상태로 스타일 변경하는 함수
}

const stopAudio = () => {
	track.pause(); // 오디오정지
	track.currentTime = 0; // 오디오 재생시간을 0으로 변경
	iconAnimation("stop"); // 정지 상태로 스타일 변경하는 함수
}