[jQuery] 제이쿼리 Audio 다루기

오디오 재생하고 정지하기

소리의 상태는 크게 '생성', '재생', '정지' 총 3가지 단계로 나눌 수 있다

let audioFile = new Audio("file location or URL"); // 생성
audioFile.play(); // 재생
audioFile.pause(); // 정지

정지 이후 재생 위치 설정하기

위 코드에서 여러 번 '재생'과 '정지'를 눌러보면, 멈춘 시점 다음부터 이어서 재생된다.

처음 또는 특정 시점부터 재생하고 싶을 경우 currentTime 속성을 활용해 재생 할 위치를 설정할 수 있다.

audioFile.currentTime = 0; // 오디오 파일 재생 위치 설정

Audio Player

<!DOCTYPE html>
<html>
<head>
  <title>Audio Player</title>
  <meta charset="utf-8" />
  <link href="css/styles.css" rel="stylesheet" />
</head>
<body>

<button id="playBtn">Music Start</button>
<button id="pauseBtn">PAUSE</button>
<button id="stopBtn">STOP</button>

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

<script> 
let audioFile = new Audio("https://d34x6xks9kc6p2.cloudfront.net/540997b0-a35f-4b69-86d6-b1c925c4a264/540997b0-a35f-4b69-86d6-b1c925c4a264.mp3");

// 재생
function playMusic() {
    audioFile.play();
}

// 일시정지
function pauseMusic() {
    audioFile.pause();
}

// 정지
function stopMusic() {
	audioFile.pause();
    audioFile.currentTime = 0; // 오디오의 시작 지점을 처음으로 다시 돌려주기.
}

$('#playBtn').on('click', playMusic);
$('#pauseBtn').on('click', pauseMusic);
$('#stopBtn').on('click', stopMusic);
</script> 

</body>
</html>

'FrontEnd > jQuery' 카테고리의 다른 글

[jQuery] 제이쿼리 '동작' 메서드 (0)	2022.01.20
제이쿼리(jQuery)와 자바스크립트(Vanilla JS) 이벤트 핸들링 차이 (0)	2022.01.10
제이쿼리(jQuery) 설치 및 사용법 (0)	2022.01.09

오디오 재생하고 정지하기

정지 이후 재생 위치 설정하기

'FrontEnd > jQuery' 카테고리의 다른 글

티스토리툴바