자바스크립트 버튼 클릭시 음악 나오게하기
- 프로그래밍/자바스크립트
- 2018. 9. 1. 00:30
오늘은 자바스크립트 강의를 해볼까합니다. 정말 어렵지 않은 코드여서 글로적기도 뭐하네요. 자바스크립트 버튼 클릭시 소리(음악 파일이 실행)가 나게 하는 방법에 대해서 알아보겠습니다. 어렵지 않고 제가 올려드린 코드만 붙여넣기 하셔도 사용하실 수 있을 정도의 수준이니 따라하기 쉬우실거예요.
네코망고의 소소한 일상 꿀팁,
따라하기만 해도 득이되는 블로그~!
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-동일조건변경허락 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.
Copyright (C) 2018 necomango all rights reserved.
버튼 클릭시 음악이 나오게 하는 HTML 스크립트
메모장 혹은 HTML Editor에서 아래 코드 입력 후 저장해봅시다. 같은 폴더에 music.mp3가 있다면 이 음악파일을 실행할것입니다. 어렵지않죠?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!doctype html> <html lang="en"> <!-- head 부분에 Script를 넣어주세요.--> <head> <meta charset="utf-8"> <!-- Sound JavaScript --> <script> function play(){ var audio = document.getElementById("audio"); audio.play(); } </script> </header> <!-- html 파일이 저장되는 같은 위치에 music.mp3라는 이름으로 음악파일을 넣어주세요.--> <body> <button type="button" href="" class="btn btn-sm btn-outline-primary" value="PLAY" onclick="play()">클릭하면 소리가 나와요.</button> <audio id="audio" src="music.mp3" ></audio> </body> | cs |
다음은 응용해서 여러개의 버튼을 클릭하였을 때 각각 다른 음악이 나오게 하려면 어떻게 할까요? 가장 손쉬운 방법은 1개씩 function을 만들어 주는 방법이 있습니다. 이것도 어느정도 html하신분이라면 쉽게 따라하실 수 있을 거예요.
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 | <!doctype html> <html lang="en"> <!-- head 부분에 Script를 넣어주세요.--> <head> <meta charset="utf-8"> <!-- Sound JavaScript --> <script> function play1(){ var audio = document.getElementById("audio1"); audio.play(); } function play2(){ var audio = document.getElementById("audio2"); audio.play(); } </script> </header> <!-- html 파일이 저장되는 같은 위치에 music1.mp3과 music2.mp 이름으로 음악파일을 넣어주세요.--> <body> <button type="button" href="" class="btn btn-sm btn-outline-primary" value="PLAY" onclick="play1()">클릭하면 1번 소리가 나와요.</button> <audio id="audio1" src="music1.mp3" ></audio> </br> <button type="button" href="" class="btn btn-sm btn-outline-primary" value="PLAY" onclick="play2()">클릭하면 2번 소리가 나와요.</button> <audio id="audio2" src="music2.mp3" ></audio> </body> | cs |
이상으로 자바스크립트 버튼 클릭시 음악 소리 나오게 하는 방법에 대해 알아보았습니다. 많은 도움이 되었으면 하네요. 그럼 다음 강의에서 뵙겠습니다.
tibsender.tistory.com
