 |
|
|  |
|
 |
3³â Àü |
ÀÚ¹Ù½ºÅ©¸³Æ® »ó¿¡¼ Audio °´Ã¼¸¦ »ý¼ºÇÏ¿© Àç»ý/ÀϽà Á¤Áö µîÀ» ÄÁÆ®·ÑÇÒ ¼ö ÀÖ´Ù.
´Ü, Å©·Òºê¶ó¿ìÀúÀÇ °æ¿ì »ç¿ëÀÚÀÇ ¸í½ÃÀûÀÎ ¾×¼Ç(Ŭ¸¯ µî)ÀÌ ¾ø´Â »óÅ¿¡¼ÀÇ À½¿ø Àç»ýÀº ÀÛµ¿ÇÏÁö ¾Ê´Â´Ù.
°´Ã¼ »ý¼º
var audio = new Audio('audio_file.mp3');
audio.play();
¸¸¾à HTML »ó¿¡ audioű׸¦ ¼±¾ðÇØµÐ »óŶó¸é, ¿¤¸®¸ÕÆ® Ãëµæ ¹æ½ÄÀ¸·Î audio°´Ã¼¸¦ È®º¸ÇÒ ¼ö ÀÖ´Ù.
<!-- HTML audio ÅÂ±× -->
<audio src="sound.mp3" id="myAudio"></audio>
/* Javascrip ÄÚµå */
const myAudio = document.getElementById("myAudio") // Audio°´Ã¼ Ãëµæ
myAudio.play(); // À½¿ø Àç»ý
myAudio.pause(); // ÀϽà Á¤Áö
Audio °´Ã¼ ¸Þ¼µå
play() Àç»ý
pause() ÀϽÃÁ¤Áö
addTextTrack() »õ·Î¿î Æ®·¢À» Ãß°¡
canPlayType() ºê¶ó¿ìÀú°¡ ÇØ´ç ¿Àµð¿À ŸÀÔÀ» Àç»ýÇÒ ¼ö ÀÖ´ÂÁö üũ
load() ¿Àµð¿À °´Ã¼¸¦ ¸®·Îµå
Audio °´Ã¼ ÇÁ·ÎÆÛƼ
src À½¿øÆÄÀÏ °æ·Î : "°æ·Î/ÆÄÀϸí.È®ÀåÀÚ"
volume º¼·ý : 0~1
loop ¹Ýº¹ ¿©ºÎ: true | false
autoplay ÀÚµ¿Àç»ý ¿©ºÎ: true | false
muted À½¼Ò°Å ¿©ºÎ: true | false
paused ÀϽÃÁ¤Áö ¿©ºÎ: true | false
ended Àç»ý¿Ï·á ¿©ºÎ: true | false
duration À½¿øÀÇ Àüü ±æÀÌ(ÃÊ ´ÜÀ§)
currentTime À½¿øÀÇ ÇöÀç Àç»ý À§Ä¡(ÃÊ ´ÜÀ§)
/* ¿Àµð¿À óÀ½ºÎÅÍ Àç»ý */
audio.currentTime = 0; // Àç»ý À§Ä¡¸¦ óÀ½À¸·Î ¼³Á¤
audio.play(); // óÀ½ºÎÅÍ ´Ù½Ã Àç»ýµÊ
Audio °´Ã¼ À̺¥Æ®
canplaythrough À½¿ø ÆÄÀÏÀÌ ¸ðµå ·ÎµåµÇ¾î Àç»ý °¡´ÉÇÒ ¶§
play Àç»ýÀÌ ½ÃÀÛµÉ ¶§
playing Àç»ý ÁßÀÏ ¶§
puase ÀϽà Á¤ÁöµÇ¾úÀ» ¶§
ended Àç»ýÀÌ ¿Ï·áµÇ¾úÀ» ¶§
volumechange º¼·ýÀÌ º¯°æµÉ ¶§
»ùÇà ÄÚµå
<!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>
// 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);
});
|
|
̵̧ : 240 |
̵̧
¸ñ·Ï
|
|
|  |
|