728x90
1.마우스로 구간을 선택하고 play 하며
2.스페이스바를 클릭시 play/pause
3.마우스 우클릭으로 구간해제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Wavesurfer.js 구간 선택 및 재생 예제</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/3.3.2/wavesurfer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/3.3.2/plugin/wavesurfer.regions.min.js"></script>
<style>
#waveform {
width: 100%;
height: 128px;
background-color: #eee;
position: relative;
}
.controls {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="waveform"></div>
<!--<필요하면 쓰세요>-->
<div id="play_time"></div>
<div id="select_time"></div>
<div id="all_time"></div>
<!--</필요하면 쓰세요>-->
<div class="controls">
<button id="play">재생</button>
<button id="pause">일시정지</button>
<button id="stop">정지</button>
</div>
<script>
const wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple',
plugins: [
WaveSurfer.regions.create()
]
});
wavesurfer.load('aa.wav'); // 오디오 파일 경로
let isSelecting = false;
let startX = 0;
let endX = 0;
// 전체 시간 표시
wavesurfer.on('ready', () => {
const duration = wavesurfer.getDuration();
document.getElementById('all_time').innerText = `전체 시간: ${duration.toFixed(2)}초`;
});
// 마우스 클릭 시작
waveform.addEventListener('mousedown', (e) => {
if (e.button === 0) { // 왼쪽 버튼 클릭
isSelecting = true;
startX = e.offsetX;
endX = startX; // 초기 끝 위치 설정
}
});
// 마우스 이동
waveform.addEventListener('mousemove', (e) => {
if (isSelecting) {
endX = e.offsetX;
// 기존 선택 영역 제거
wavesurfer.clearRegions();
// 새로운 선택 영역 표시
wavesurfer.addRegion({
start: wavesurfer.getDuration() * (startX / waveform.offsetWidth),
end: wavesurfer.getDuration() * (endX / waveform.offsetWidth),
color: 'rgba(0, 150, 255, 0.5)'
});
console.log('mouse move');
}
});
// 마우스 클릭 종료
waveform.addEventListener('mouseup', () => {
isSelecting = false;
// 구간 선택이 완료되면 선택된 구간을 표시
if (startX !== endX) {
const startTime = wavesurfer.getDuration() * (startX / waveform.offsetWidth);
const endTime = wavesurfer.getDuration() * (endX / waveform.offsetWidth);
console.log(`선택된 구간: ${startTime.toFixed(2)}초 ~ ${endTime.toFixed(2)}초`);
document.getElementById('select_time').innerText = `선택된 구간: ${startTime.toFixed(2)}초 ~ ${endTime.toFixed(2)}초`;
}else {
document.getElementById('select_time').innerText = `선택된 구간: 없음`;
}
});
// 마우스가 영역을 벗어났을 때
waveform.addEventListener('mouseleave', () => {
if (isSelecting) {
isSelecting = false;
}
});
// 마우스 오른쪽 버튼 클릭 이벤트 (구간 해제)
waveform.addEventListener('contextmenu', (e) => {
e.preventDefault(); // 기본 컨텍스트 메뉴 방지
wavesurfer.clearRegions(); // 선택된 구간 해제
});
// 버튼 클릭 이벤트
document.getElementById('play').addEventListener('click', () => {
play_pause();
});
document.getElementById('pause').addEventListener('click', () => {
wavesurfer.pause();
});
document.getElementById('stop').addEventListener('click', () => {
wavesurfer.stop();
});
// 진행 중 시간 표시
wavesurfer.on('audioprocess', function () {
const currentTime = wavesurfer.getCurrentTime();
document.getElementById('play_time').innerText = `진행 중 시간: ${currentTime.toFixed(2)}초`;
});
// 키보드 이벤트 추가
document.addEventListener('keydown', (e) => {
if (e.code === 'Space') { // 스페이스바로 재생/일시정지
e.preventDefault(); // 기본 동작 방지 (스크롤 등)
play_pause();
}
});
function play_pause()
{
if (wavesurfer.isPlaying()) {
wavesurfer.pause();
} else {
// 선택된 구간 확인
const regions = wavesurfer.regions.list;
// 선택된 구간이 있을 경우
if (Object.keys(regions).length > 0) {
const region = regions[Object.keys(regions)[0]]; // 첫 번째 선택된 구간
wavesurfer.play(region.start, region.end); // 선택된 구간만 재생
} else {
// 선택된 구간이 없으면 전체 재생
wavesurfer.play();
}
}
}
</script>
</body>
</html>
'개발언어 > Web API' 카테고리의 다른 글
| wavesurfer.js의 중심선 그리기, 최소값(minheight) 설정 (0) | 2024.05.07 |
|---|---|
| [JS]게이지 그래프 만들기 (0) | 2022.10.27 |
