HTML 오디오 구간반복

www.yoonbumtae.com

HTML

<audio id=audio controls preload="metadata" loop>
  <source id=sndSrc src="http://cdndown.chosun.com/chosun/entertainment/native/Japanese-20191217.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>
<button id="btn-set-repeat">
구간반복 OFF
</button>
<button id="btn-set-start">
  시작
</button>
<button id="btn-set-end">
  끝
</button>
<pre id="debug"></pre>

CSS

.blue{
  color: blue;
}

JavaScript

// audio 객체 로드
const audio = document.getElementById("audio")

// 설정 변수
const setting = {
	isSectionRepeatOn: false,
  startTime: 0,
  endTime: 0
}

// DOM 로드
const btnSetRepeat = document.getElementById("btn-set-repeat")
const btnSetStart = document.getElementById("btn-set-start")
const btnSetEnd = document.getElementById("btn-set-end")
const debug = document.getElementById("debug")

// 오디오 메타 데이터가 로드되었을 때
audio.addEventListener("loadedmetadata", e => {
	setting.endTime = e.target.duration
}, false)

// 버튼 클릭 이벤트(시작, 끝)
btnSetStart.onclick = e => {
	if(setting.endTime <= audio.currentTime){
  	debug.innerHTML = "시작 시간은 끝 시간보다 크거나 같으면 안됩니다."
  } else {
    setting.startTime = audio.currentTime
    debug.innerHTML = `시작: ${setting.startTime} / 끝: ${setting.endTime}`
    // 구간반복 ON 상태에서 시작 버튼 클릭하면 구간반복이 OFF되도록 함 (UX 측면)
    if(setting.isSectionRepeatOn){
    	btnSetRepeat.click()
    }
  }
}
btnSetEnd.onclick = e => {
	if(setting.StartTime >= audio.currentTime){
  	debug.innerHTML = "끝 시간은 시작 시간보다 작거나 같으면 안됩니다."
  } else {
    setting.endTime = audio.currentTime
    debug.innerHTML = `시작: ${setting.startTime} / 끝: ${setting.endTime}`
    // 구간반복 OFF 상태에서 끝 버튼 클릭하면 구간반복이 ON되도록 함 (UX 측면)
    if(!setting.isSectionRepeatOn){
    	btnSetRepeat.click()
    }
  }
}

// 버튼 설정 이벤트(구간반복 ON/OFF)
btnSetRepeat.onclick = e => {
	setting.isSectionRepeatOn = !setting.isSectionRepeatOn
  if(setting.isSectionRepeatOn){
  	btnSetRepeat.innerHTML = "구간반복 ON"
    btnSetRepeat.className = "blue"
    audio.currentTime = setting.startTime
    audio.play()
  } else {
  	btnSetRepeat.innerHTML = "구간반복 OFF"
    btnSetRepeat.className = ""
  }
}

// 재생 중일때, 현재 위치가 끝 위치보다 크면 시작 위치로 되돌아가도록 함
audio.addEventListener("timeupdate", e => {
	if(setting.isSectionRepeatOn && audio.currentTime >= setting.endTime){
  	audio.currentTime = setting.startTime
    audio.play()
  }
}, false)

// 구간반복 ON일때, 현재 위치가 시작 위치보다 작으면 시작 위치로 강제 이동하도록 함
audio.addEventListener("play", e => {
	if(setting.isSectionRepeatOn...