HTM5 에서 음악 재생하는 걸 해봤다.
서버에 올리고 테스트를 해봤는데 모양은 볼품없지만 소리는 잘 나온다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 audio play</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no"/><!-- 스마트폰에서 글자 크기가 줄어들지 않고 나오게 하는 명령어 -->
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
var audio = new Audio("test.mp3");
audio.addEventListener("timeupdate", function(e) {
$("info").innerHTML = audio.currentTime + "/" + audio.duration;
});
// 볼륨 조절
function changeVolume(v) {
var new_v = audio.volume + v;
if (0 <= new_v && new_v <= 1.0) {
audio.volume = new_v;
}
}
</script>
</head>
<body>
<h3>HTML5 음악재생</h3>
<div id="info"></div>
<div id="player_div">
<input type="button" value="재생" onclick="audio.play()" />
<input type="button" value="정지" onclick="audio.pause()" />
<input type="button" value="처음부터" onclick="audio.currentTime=0;audio.play()" /><br />
<input type="button" value="소리작게" onclick="changeVolume(-0.2)" />
<input type="button" value="소리크게" onclick="changeVolume(0.2)" />
</div>
</body>
</html>
'Web 프로그램 > PHP 문법' 카테고리의 다른 글
| [PHP] switch 문 (0) | 2015.06.01 |
|---|---|
| [PHP] 문자열 자르기 substr (0) | 2015.05.16 |
| [PHP기초] 삼항연산자 ? (0) | 2015.03.06 |
| [PHP기초] continue 문 (0) | 2015.03.05 |
| [PHP문법] array (배열) (0) | 2015.03.04 |
Link2Me