[javascript / 자바스크립트] audio play (오디오 재생) 방법, Audio 객체 예시

Client/Javascript

[javascript / 자바스크립트] audio play (오디오 재생) 방법, Audio 객체 예시

meeeeejin 2020. 6. 19. 18:37

자바스크립트에서 오디오 재생하기 
HTML5부터는 자바스크립트에서 Audio 객체를 이용해 오디오를 재생할 수 있다. 자바스크립트에서 오디오 파일을 불러와 재생하는 방법은 다음과 같다. 
 



1
2

var audio = new Audio('audio_file.mp3');
audio.play();

cs


 
audio라는 변수를 선언해 Audio 객체를 생성하고, play() 메소드를 사용해서 음악을 재생하는 방법이다. 
new Audio('audio_file.mp3')에 ()안에는 자신이 넣고 싶은 음악 파일의 src를 적어주면 된다. 
 
 
만약 HTML 파일에 Audio 객체가 있고, 자바스크립트에서 이를 불러와 재생하고 싶다면 다음 방법을 쓸 수 있다. 
 



1

document.getElementById('myAudio').play();

cs


 
'myAudio' 자리에 재생할 Audio 객체의 id를 넣어주면 된다. 
 
 
 
 
 
Audio 객체 
음악을 재생하기 위한 Audio 객체에는 play()말고도 다양한 속성과 메소드들이 있다. 
 
var audio = document.getElementById("myAudio");
위와 같은 코드로 audio라는 변수가 id가 myAudio인 Audio 객체를 가리킨다고 가정
 
<자주 쓰이는 Audio 객체의 속성>audio.autoplay = true;
// audio가 load 될 때 자동재생 됨
audio.currentTime = 5;
// audio의 재생시점을 5초로 설정함
audio.duration;
// audio의 길이를 초(seconds) 단위로 반환
audio.loop = true;
// audio를 반복 재생함
audio.src = "my_audio.mp3";
// audio의 경로를 지정함(URL)
audio.volume = 0.2;
// audio의 음량을 0.2로 지정함
// 음량은 0.0 ~ 1.0 사이 값으로 지정할 수 있고, 1.0이 가장 큰 음량
 
 
<자주 쓰이는 Audio 객체의 메소드>audio.play();
// audio를 재생함
audio.pause();
// audio를 일시정지함
audio.load();
// audio를 다시 load함
// 주로 audio의 src나 설정이 바뀌었을 경우에 사용
 
 
Audio 객체 사용 예시 
<HTML 코드>
 



1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Audio 객체</title>
  </head>
  <body>
    <button class="btn1">play sound1</button>
    <button class="btn2">play sound2</button>
    <script src="index.js"></script>
  </body>
</html>
Colored by Color Scripter

cs


 
 
<JavaScript 코드>
 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// btn1을 눌렀을 때 sound1.mp3 재생
document.querySelector(".btn1").addEventListener("click", function () {
  var audio1 = new Audio("sound1.mp3");
  audio1.loop = false; // 반복재생하지 않음
  audio1.volume = 0.5; // 음량 설정
  audio1.play(); // sound1.mp3 재생
});
 
// btn2를 눌렀을 때 sound2.mp3 재생
document.querySelector(".btn2").addEventListener("click", function () {
  var audio2 = new Audio("sound2.mp3");
  audio2.loop = true; // 반복재생하지 않음
  audio2.volume = 0.5; // 음량 설정
  audio2.play(); // sound2.mp3 재생
  setTimeout(function () { // 1초 후 sound2.mp3 일시정지
    audio2.pause();
  }, 1000);
});
Colored by Color Scripter

cs


 
 
 
 
참고 사이트: https://www.w3schools.com/tags/ref_av_dom.asp, 
https://stackoverflow.com/questions/9419263/playing-audio-with-javascript
 
 
공부한 것을 정리한 내용입니다. 수정할 부분이 있다면 알려주시면 감사하겠습니다 :)
 
 
 

728x90

저작자표시 비영리 동일조건

'Client > Javascript' 카테고리의 다른 글

[Javascript / 자바스크립트] 현재 시각(시간), 날짜, 연도 구하기 (Date 객체) (0)	2020.06.25
[javascript / 자바스크립트] 시간 지연 함수, delay 방법, 몇 초 후 실행 - setTimeout() (4)	2020.06.19
[javascript / 자바스크립트] 이벤트가 발생한 대상(요소) 얻기 - event.target (0)	2020.06.19
[Javascript / 자바스크립트] 배열(array) 사용 방법과 예제 (1)	2020.06.13
[Javascript / 자바스크립트] Math.random() - random number (난수) 생성하기 (0)	2020.06.12

현재글[javascript / 자바스크립트] audio play (오디오 재생) 방법, Audio 객체 예시

250x250

EC2, BOJ, AWS, docker, 개발자의 글쓰기, spring, Java, html, display flex, Python, 파이썬, 모두 0으로 만들기, 프로그래머스, CSS, css flexbox, c++, 책 리뷰, 백준, 오늘 또 일을 미루고 말았다, 2018 카카오 코딩테스트,

Today :
Yesterday :

👾

[javascript / 자바스크립트] audio play (오디오 재생) 방법, Audio 객체 예시

자바스크립트에서 오디오 재생하기

Audio 객체

<자주 쓰이는 Audio 객체의 속성>

<자주 쓰이는 Audio 객체의 메소드>

Audio 객체 사용 예시

'Client > Javascript' 카테고리의 다른 글

'Client/Javascript'의 다른글

티스토리툴바

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

[javascript / 자바스크립트] audio play (오디오 재생) 방법, Audio 객체 예시

자바스크립트에서 오디오 재생하기

Audio 객체

<자주 쓰이는 Audio 객체의 속성>

<자주 쓰이는 Audio 객체의 메소드>

Audio 객체 사용 예시

'Client > Javascript' 카테고리의 다른 글

'Client/Javascript'의 다른글

관련글

티스토리툴바