스틱코드라는 플러그인을 이용해 웹에서 음악 재생 예제를 만들어봅시다.
스틱 코드에 등록된 코드를 간편하게 불러와서 사용해봅시다.
* 웹에서 음악 재생하기
stickode.com/detail.html?no=2157
스틱코드
stickode.com
============================================================================
전체코드입니다.
<html> 스틱코드 호출태그 : 웹에서 음악 재생하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>stickcode_musicPlay</title>
<style>
input {
width: 75px;
border-radius: 5px;
padding: 6px;
color: white;
font-family: 'Lato', sans-serif;
}
#play {
margin-right: 5px;
background-color: #fa5a5a;
}
#pause {
margin-left: 5px;
background-color: #f0d264;
}
</style>
</head>
<body>
<script>
var audio = new Audio('music.mp3');
</script>
<body>
<!--재생-->
<input type="button" id="play" onclick="audio.play();" value="재생">
<!--일시정지-->
<input type="button" id="pause" onclick="audio.pause();" value="일시정지">
</body>
</body>
</html>
자바스크립트에서는 Audio 객체를 이용해서 오디오를 재생할 수 있습니다.
Audio 객체 는 다음과 같은 속성과 메소드를 가집니다.
속성
src
audio 파일의 경로나 url 을 지정합니다.
volume
audio의 음량을 설정합니다. 0~1 사이의 값을 가지며, 1에 가까울수록 소리가 큽니다.
currentTime
audio의 재생 지점입니다. 초 단위이며. 0 값인 경우에 처음부터 음악을 재생합니다.
loop
audio의 반복 여부를 결정하며 boolean 값을 갖습니다.
메서드
play()
audio을 재생합니다.
pause()
audio을 일시정지 합니다.
load()
audio를 다시 로드합니다.
더 자세하게 알고 싶으면 아래의 사이트에서 더 찾아볼 수 있습니다.
HTML Audio/Video DOM Reference
HTML Audio/Video DOM Reference HTML Audio and Video DOM Reference The HTML5 DOM has methods, properties, and events for the and elements. HTML Audio/Video Methods Method Description addTextTrack() Adds a new text track to the audio/video canPlayType() Chec
www.w3schools.com
<결과물>
재생 버튼을 누르면 음악이 재생되고, 일시정지 버튼을 누르면 재생되던 음악이 일시정지됩니다.
그리고 다시 PLAY 버튼을 누르니 다시 이어서 재생되는걸 볼 수 있습니다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 검색어 자동완성 만들기 (0) | 2021.06.23 |
|---|---|
| [JavaScript] 입력 값 복사해서 다른 입력창에 값 넣어주기 (0) | 2021.06.14 |
| [JavaScript] 디지털 시계 만들기 (4) | 2021.06.02 |
| [JavaScript] JSON 데이터 사용해보기 (0) | 2021.06.01 |
| [JavaScript] 태그 추가 삭제 기능 빠르게 구현하기 (5) | 2021.05.28 |
